1

我有一个while循环：

x = true;
while (x == true) {
   document.images['id'].src = arr[i];
   i = i+1;
   x = confirm('do you want to see more?')
}

这向我显示了每张图像，然后询问我是否想在 Firefox 和 ie 上查看更多内容，但在 chrome 和 safari 中，它仅在我离开循环后才显示图像。我知道这很有效，但我想知道是否有办法在我进行时强制执行循环内的行？

感谢您的输入！

4

3 回答 3

4

您可以添加一系列 setTimeout 而不是循环来强制 javascript 用户线程停止，从而让浏览器刷新绘图。

var i = 0; // define outside showNextImage to be properly captured by it.
var showNextImage = function() {
    document.images['id'].src = arr[i]; 
    i = i+1; 
    x = confirm('do you want to see more?');
    if (true) setTimeout(showNextImage, 10);
};
于 2012-05-10T16:14:27.610 回答
2

两个答案：

  1. 不要使用confirm
  2. 如果你真的要使用confirm，请在更新图像之后但之前向浏览器屈服。confirm

1.不要使用confirm

最好的方法是根本不使用confirm；它已经过时了，正如您发现的那样，它在不同浏览器上的行为在是否显示页面更改方面略有不同。

相反，我会使用现有的 350,124 个“对话框”库中的任何一个（jQuery UI有一个不错的库，但同样有很多），它们异步工作，因此您肯定会看到页面更改。你的循环会变成一个异步函数，但是一旦你习惯了它们并没有那么棘手，而且在用户体验方面的好处是巨大的。

function chooseImage(arr, completionCallback) {
    var i = 0, imgElement = document.images['id'];

    ask();

    function ask() {
        imgElement.src = arr[i];
        showDialog(gotAnswer); // the nature of "show dialog" will depend on which one you use
    }

    function gotAnswer() {
        if (userSaidYes) { // Again, depends on the library you're using
            completionCallback(i); // Tell the calling code which one they picked
        }
        else {
            // Is there another?
            ++i;
            if (i >= arr.length) {
                // No, tell the user
                /* left as exercise */

                // Tell calling code none was chosen
                completionCallback(-1); // Using -1 as a flag for none
            }
            else {
                // Yes, ask about it
                ask();
            }
        }
    }
}

2.使用confirm但屈服

问题在于，confirm当浏览器向用户询问问题时，事情会戛然而止。当确认窗口处于活动状态时（如您所见），您对页面所做的更改可能不会显示。

如果你真的想使用confirm，你仍然可以这样做，只需先简单地返回浏览器，以便它有时间显示页面更改。但是请注意，如果图像需要很长时间才能下载，这仍然不能保证。

function chooseImage(arr, completionCallback) {
    var i = 0, imgElement = document.images['id'];

    showAndHandOff();

    function showAndHandOff() {
        imgElement.src = arr[i];
        setTimeout(ask, 0);
    }

    function ask() {
        if (confirm('do you want to see more?')) {
            ++i;
            if (i >= arr.length) {
                alert("Sorry, there aren't any more.");
                completionCallback(-1);
            }
            else {
                showAndHandOff();
            }
        }
        else {
            completionCallback(i);
        }
    }
}
于 2012-05-10T16:15:30.370 回答
0

例如：

var x = true,  
  i = 0,  
  fn = function() {  
    document.images['id'].src = arr[i];  

    x = confirm('do you want to see more?');  
    if ( x ) {  
      i = i+1;  
      setTimeout(fn, 0)  
    }  
  };  
fn();
于 2012-05-10T16:24:00.983 回答