0

クリック イベント (一種のパニック ボタン) でループを停止する方法を探しています。ボタンをクリックすると、すぐに停止するはずです。

// 基本的な考え方

$.each(someArray, function(index, value){
    setTimeout(function(){
          console.log(index);
     },5000*index);
});


$('#panic-button').click(function(){
    //the code that should stop the looping
}):
4

4 に答える 4

3

終了できるループin the backgroundが必要な場合は、それをシミュレートする必要があります。これは、js は基本的にシングル スレッドであり、ループが終了するまでブロックされ、ボタンをクリックできるようになるためです。

以下に例を示します。settimeout を使用して、クリックでキャンセルできるループをシミュレートします。

フィドル

于 2012-07-12T00:35:51.503 に答える
3

ループが開始されると、ハンドラーで$.eachループを中断することはできません。clickJavaScript の実行はシングルスレッドであるためclick、ループが終了した後、スレッドが次に解放されるまで、ハンドラーはせいぜいキューに入れられます。

ただし、タイマーは非同期で実行されるため、各 ID を保持してクリアすることでキャンセルできます。

var timeouts = [];

$.each(someArray, function(index, value){
    timeouts.push(setTimeout(function(){
          console.log(index);
     },5000*index));
});


$('#panic-button').click(function(){
    $.each(timeouts, function (_, id) {
       clearTimeout(id);
    });

    timeouts = [];
}):
于 2012-07-12T00:22:06.037 に答える
1

$.each() の外に関数の戻り値を作成し、フラグ変数を使用してボタンがクリックされたかどうかを判断します。私は通常、「window」を使用してグローバル関数と変数を宣言します。

var panicButtonClicked = false;  
window.panicButtonClicked = panicButtonClicked;
var timeouts = [];
window.timeouts = timeouts;

$.each(someArray, function(index, value){
    if( !panicButtonClicked )
    {
         timeouts.push( setTimeout(function(){
          console.log(index);
         }, 5000*index) );
    }
});

$('#panic-button').click(function(){
    //the code that should stop the looping
    panicButtonClicked = true;
    $.each(timeouts, function (_, id) {
        clearTimeout(id);
    });
});

Jonathan Lonowski によって提供された for ループを編集に含めました。アイデアは似ていますが、最初のループが実行されないようにするために追加の変数が必要になる点が異なります。これで問題は解決しますか?

于 2012-07-12T00:20:08.517 に答える
0

あなたの答えは非常に簡単です：

ハンドラvar $theTimeout =の前に追加しsetTimeoutてクリアします: 。clickclearTimeout($theTimeout)

http://www.w3schools.com/js/js_timing.asp

于 2012-07-12T00:13:50.590 に答える