この関数は思い通りに動作しないのですが、JS初心者の私にはその理由がわかりません。
5秒待ってからnewState
が-1
かどうかをチェックする必要があります。
現在、この関数は待たずにすぐにチェックしています。
function stateChange(newState) {
setTimeout('', 5000);
if(newState == -1) {
alert('VIDEO HAS STOPPED');
}
}
javascriptで5秒間の一時停止をしようとするだけではいけません。 そのようにはいきません。 コードの関数を5秒後に実行するようにスケジュールすることはできますが、後で実行したいコードを関数の中に入れなければならず、その関数以降の残りのコードはすぐに実行され続けてしまいます。
例えば
function stateChange(newState) {
setTimeout(function(){
if(newState == -1){alert('VIDEO HAS STOPPED');}
}, 5000);
}
しかし、次のようなコードがあれば
stateChange(-1);
console.log("Hello");
console.log()文はすぐに実行されます。 stateChange()
関数でタイムアウトが発生した後まで待つことはありません。 javascript の実行をあらかじめ決められた時間だけ一時停止することはできません。
その代わり、遅延実行させたいコードは、setTimeout()
コールバック関数の中にあるか、その関数から呼び出されている必要があります。
もし、ループを使って一時停止をしようとすると、実質的にJavascriptのインタープリタを一定時間ハングアップさせることになります。 Javascriptは1つのスレッドでしかコードを実行しないため、ループしている間は他に何も実行できません(他のイベントハンドラが呼び出されることもありません)。 そのため、ある変数が変化するのを待つループは、その変数を変化させるために他のコードを実行することができないため、機能しません。
次のような遅延関数を使用します。
var delay = ( function() {
var timer = 0;
return function(callback, ms) {
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
使用方法です。
delay(function(){
// do stuff
}, 5000 ); // end delay
Credits go to user CMS, see https://stackoverflow.com/q/1909441/1066234