1

画像をクリックすると、3 秒後に画像が変わります。しかし、その 3 秒間に画像を複数回クリックすると、新しいタイマーが開始されます。特に画像を 1 秒間に 5 回クリックすると 3 秒間は変化しませんが、3 秒間経過すると 1 秒間に 5 回変化します。

この関数が実行されている場合、現在実行中の関数を強制終了し、新しい関数を開始するという if ステートメントを実行する方法はありますか。このようにして、画像の最初の 4 回のクリックを無視して 5 回目のクリックのみを実行するか、最初のクリックのみを実行して他の 4 回のクリックをスキップします。

コードは次のとおりです。

 function auto_change(a,b) { // a is the current image and b calls a function that makes certain image visible, it works but need to fix the multiple clicks problem 
if (document.getElementById(a).style.visibility == 'visible'){
    setTimeout(b,3000);
    return;
}
4

1 に答える 1

4 
var waitTimer = null;
function auto_change(a,b){
  if (document.getElementById(a).style.visibility == 'visible'){
    waitTimer && clearTimeout(waitTimer);
    waitTimer = setTimeout(b, 3000);
  }
}

タイムアウト インスタンスを保存し、それが既に存在するかどうかを確認します。その場合は、クリアしてリセットします。そうでない場合は、設定してください。これにより、最後のクリックが唯一の責任あるものになります。

その他のバリエーション:

1）クリックは、クリックされたものに固有aです。

var waitTimer = [];
function auto_change(a,b){
  if (document.getElementById(a).style.visibility == 'visible'){
    waitTimer[a] && clearTimeout(waitTimer[a]);
    waitTimer[a] = setTimeout(b, 3000);
  }
}

2) 最初のクリックで反応:

var waitTimer = null;
function auto_change(a,b){
  if (!waitTimer && document.getElementById(a).style.visibility == 'visible'){
    waitTimer = setTimeout(b, 3000);
  }
}

3) 最初のクリックと特定のハイブリッドa:

var waitTimer = [];
function auto_change(a,b){
  if (!waitTimer[a] && document.getElementById(a).style.visibility == 'visible'){
    waitTimer[a] = setTimeout(b, 3000);
  }
}
于 2013-09-29T23:58:13.100 に答える