今回は setTimeout を使用して、時間に従って値を順番に出力する例を実装します。実際、これは私が初期によく犯した間違いでもあり、あるいはこの機能を実現するために使用したようです。 js は突飛ですが、実際には私の間違いです (笑)。JS の威力を理解していませんでした。今回は setInterval を使用して実装する場合、非常に簡単であることに注意してください。 setTimeout を使用します。次に、次のコードを記述します。
for(var i = 0; i < 5; i++) { setTimeout(console.log(i),i*1000); }
このコードでは、各 i の値 0、1、2、3、4 が順番に出力されますが、実行時間は関係ありません。なぜなら、 console.log() が の実行呼び出しだからです。メソッドを呼び出した後、すぐに実行されるため、期待した目的を達成できません。
それでは、引き続き次のコード部分を見てみましょう
for(var i = 0; i< 5; i++ ){ setTimeout(function(){ console.log(i); },i*1000); }
ここでは、出力された console.log を含む匿名関数を使用して i を出力します。そのため、最初の setTimeout が実行される前に、for ループが実行され、最後の i = 5 が共有されます。実際には 2 つの解決策があります。まず最初の解決策を見てみましょう:
var j = 0; function abc(){ console.log("j = "+j); j++; } for(var i = 0; i < 10; i++ ){ setTimeout(abc,i*1000) }
ここでは、abc 関数が実行されるたびに値を格納するグローバル変数が 1 回追加されるため、setTimeout が実行されると abc 関数が呼び出され、期待どおりの効果が得られます。 j はグローバル変数です。グローバル変数は値を変更しやすい、名前が競合するなどの問題が発生します。2 番目の方法を実装するには、クロージャ関数を再度導入します。クロージャ関数が作成されるたびに、独自の値を格納するためのこの考え方を使用して、次のようにコードを記述します。
for(var i = 0; i < 10; i++ ) { (function(x){ setTimeout(function() { console.log(x) },x*1000) })(i) }
ps: クロージャを使用して setTimeout を単純にカプセル化します
JS スクリプトを作成する場合、setTimeout の呼び出しなど、いくつかのスペル関数がよく使用されます
var msgalert="test"; function TestAlert(msg) { alert(msg) } $(document).ready(function () { $("#btnCancel").click(function (e) { setTimeout("TestAlert("+msgalert+")",1000); }); })
が欠落していることがわかりました。
$(document).ready(function () { $("#btnCancel").click(function (e) { setTimeout("TestAlert('"+msgalert+"')",1000); }); })
var msgalert="test"; function dalayAlert(msg ,time){ setTimeout( TestAlert(msg), time ); } function TestAlert(msg) { alert(msg) } $(document).ready(function () { $("#btnCancel").click(function (e) { dalayAlert(msgalert,1000) });