0

次のようなHTMLページをアニメーション化したいと思います。

function showElements(a) {   
  for (i=1; i<=a; i++)  {  
    var img = document.getElementById(getImageId(i));  
    img.style.visibility = 'visible';  
    pause(500);  
  }  
}

function pause(ms) {
  ms += new Date().getTime();
  while (new Date() < ms){}
}

残念ながら、ページはjavascriptが完了するとレンダリングされます。

追加した場合 

 window.location.reload();

各一時停止後（500）; 呼び出し、これは私のjavascriptを強制的に終了させるようです。（少なくとも、JavaScriptの次のコード行には到達しません。）

挿入すれば

 var answer=prompt("hello");

各pause（500）の後、これは私が望むこと（つまり、ページの更新）を正確に実行します。ただし、実際にはユーザー入力が必要ないため、迷惑なプロンプトは必要ありません。

それで...ページの更新を強制し、ユーザーからの入力を要求せず、スクリプトを続行できるようにする、一時停止後に呼び出すことができるものはありますか？

4

5 に答える 5

2

javascriptスレッドの実行中、レンダリングスレッドはページを更新しません。を使用する必要がありますsetTimeout。

2番目の関数を作成したり、外部コードに公開したりする代わりに、クロージャーがオンにiなっている内部関数を使用してこれを実装できます。ai

function showElements(a) {
    var i = 1;
    function showNext() {
        var img = document.getElementById(getImageId(i));  
        img.style.visibility = 'visible'; 
        i++;
        if(i <= a) setTimeout(showNext, 500);
    }
    showNext();
}

呼び出しのwindow.location.reload();たびに追加すると、JavaScriptが強制的に終了するようですpause(500)

window.reload()ブラウザに現在のページを破棄させ、サーバーからリロードさせます。これにより、JavaScriptが停止します。

var answer=prompt("hello");それぞれの後に挿入するpause(500)と、これはまさに私が望むことを実行します。

prompt、、alertおよびconfirmは、実際にjavascriptスレッドを一時停止できる唯一のものです。一部のブラウザでは、これらでもUIスレッドをブロックします。

于 2012-09-05T19:47:31.813 に答える
1

関数pause()はUIスレッドでスリープし、ブラウザーをフリーズします。
これがあなたの問題です。

setTimeout代わりに、後で関数を呼び出すために呼び出す必要があります。

于 2012-09-05T19:45:17.307 に答える
1

Javascriptは本質的にイベント駆動型/非ブロッキングです（これはjavascript / Node.jsの優れた点の1つです）。組み込み機能を回避しようとすることは決して良い考えではありません。あなたがやりたいことをするために、あなたはあなたのイベントをスケジュールする必要があります。これを行う1つの方法は、setTimeoutと単純な再帰を使用することです。

function showElements(a) {   
  showElement(1,a);
}

function showElement(i, max) {
   var img = document.getElementById(getImageId(i));  
   img.style.visibility = 'visible';
   if (i < max) {
      setTimeout(function() { showElement(i+1, max) }, 500);
   }
}
于 2012-09-05T19:47:37.073 に答える
0 
var i = 1;
function showElements(a) {   
    var img = document.getElementById(getImageId(i));  
    img.style.visibility = 'visible';  
    if (i < a) {
      setTimeout(function() { showElements(a) }, 500);  
    }
    i++;
}
showElements(5);
于 2012-09-05T19:49:04.910 に答える
0 
function showElements(a,t) {   
  for (var i=1; i<=a; i++)  {  
    (function(a,b){setTimeout(function(){
      document.getElementById(getImageId(a)).style.visibility = 'visible'},a*b);}
    )(i,t)  
  }  
}

t引数は遅延です（例：500）

デモ： http： //jsfiddle.net/doktormolle/nLrps/

于 2012-09-05T19:56:36.697 に答える