【解決方法】setTimeout 関数にパラメータを渡す


setTimeout を使用して関数を呼び出し、いくつかの引数を渡したいループがあります。

関数は 5 回呼び出されますが、引数は毎回 arg1 が (5) に等しいため、期待したものと異なります。

私が期待しているのは、関数が初めて呼び出されたときに arg1= 0 が取得され、2 回目は arg1=1 で Arg1 = 4 で終了することです。

毎回得られるのは (arg1=5) です。

JavaScript
foo();
function foo()
{
	for (var i = 0; i < 5; i++)
	{
		setTimeout(
		function(){
		callingByTimeout(i)
		}
		,100)
	}
}
function callingByTimeout(arg1)
{ 
	alert(arg1)
	//output for first time  : 5
	//output for second time : 5
	//output for third time  : 5
	//output for fourth time : 5
	//output for fifth time  : 5
}

前もって感謝します。

よろしくジャマル

解決策 1

こんにちは、Jamal。以下のコードに変更してみてはいかがでしょうか。

JavaScript
var count = 0;
function foo()
{
  if (count<5)
  {
    alert(count);
    count++;
    var result = setTimeout("foo()",100);
  }
}
foo();

解決策 2

やあ、

あなたの例では、setTimeout のコールバック関数は匿名関数です。 このため、変数 i のスコープは期待どおりではなくなりました。 コールバック関数が呼び出されるとき、i の値は foo() 関数からのものになり、その瞬間にループが完了し、値が 5 になることを意味します。これらのことについては Google で検索できます。

Robby Tendean615 解決策は素晴らしいです。

解決策 3

解決策を見つけました。

それは非常にうまく機能します:

C#
foo();
function foo(i)
{
    for (var i = 0; i < 5; i++)
    {
        setTimeout(
        function (index)
        {
            return function ()
            {
                callingByTimeout(index);
            }

        } (i)
        , 1000)
    }
}
function callingByTimeout(arg1)
{
    alert(arg1)
    //output for first time  : 0
    //output for second time : 1
    //output for third time  : 2
    //output for fourth time : 3
    //output for fifth time  : 4
}

解決策 4

反復ごとに arg1 が i の現在値と等しいという望ましい結果を達成するには、IIFE (即時呼び出し関数式) を使用して新しいスコープを作成し、i の現在値をキャプチャします。

foo();
function foo() {
    for (var i = 0; i < 5; i++) {
        (function(arg1) {
            setTimeout(function() {
                callingByTimeout(arg1);
            }, 100);
        })(i);
    }
}

function callingByTimeout(arg1) {
    alert(arg1);
    // Output for the first time: 0
    // Output for the second time: 1
    // Output for the third time: 2
    // Output for the fourth time: 3
    // Output for the fifth time: 4
}

これらのリソースは setTimeout に役立ちます。
setTimeout() グローバル関数 – Web API | MDN[^]
Javascript setTimeout – 知っておくべきことすべて[^]

コメント

タイトルとURLをコピーしました