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 でさらに表示するかどうかを尋ねられますが、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

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 に答える