0

ボタンで起動する簡単なカウントダウンがあります。iを使用しonclickてアクションを開始しますが、ボタンを押し続けると時間が長くなり、カウントダウンが同期していないことに気付きました。これを防ぎ、一度に1回のクリックのみを許可するにはどうすればよいですか？

  var count = 10,
      startcounter = document.getElementById("stercount");

startcounter.onclick = function() {
  countdown = setInterval(function(){
    document.getElementById("countdown").innerHTML = count + " seconds remaining!";
    if (count <= 0) {
      clearInterval(countdown);
      document.getElementById("countdown").innerHTML = "Done!";
    }
    count--;
  }, 1000);
};

デモ：http：//jsfiddle.net/StWXk/1/ </ p>

4

4 に答える 4

4

フラグ変数のisClickedデフォルトを。として設定しますfalse。ボタンをクリックすると、に設定さisClickedれtrueます。clickイベント中に、もしそうisClickedならtrueそれを作りますreturn false。

var isClicked = false;  
var count = 10,
      startcounter = document.getElementById("stercount");

startcounter.onclick = function() {
    if(isClicked) return false;

    isClicked = true;
    countdown = setInterval(function(){
    document.getElementById("countdown").innerHTML = count + " seconds remaining!";
    if (count <= 0) {
      clearInterval(countdown);
      document.getElementById("countdown").innerHTML = "Done!";
    }
    count--;
  }, 1000);
};​

デモ： http： //jsfiddle.net/StWXk/2/

于 2012-12-16T02:42:06.547 に答える
2

クリック ハンドラーを削除します。

startcounter.onclick = function() {
    this.onclick = null;
    ...
};

http://jsfiddle.net/StWXk/3/

編集:一時停止ボタンの要件に基づいて、タイマーが一時停止したときにクリック ハンドラーを再バインドできます。

function startTimer() {
    this.onclick = null;
    ...
}

startcounter.onclick = startTimer;

pausecounter.onclick = function() {
    startcounter.onclick = startTimer;
    clearTimeout(countdown);
};

http://jsfiddle.net/StWXk/8/

于 2012-12-16T02:57:57.967 に答える
1

これには 2 つの解決策があります。1 つはタイマーが onclick の外部で実行されていることを追跡するフラグを定義および設定することです。もう 1 つは、カウントダウンの前に clearInterval を呼び出して、すでに実行中のカウントダウンを停止することです。

解決策 1: タイマーが実行中かどうかを示すフラグ。

var count = 10,
    startcounter = document.getElementById("stercount"),
    running;

startcounter.onclick = function() {
    if (running)
        return;

    running = true;
    countdown = setInterval(function(){
        document.getElementById("countdown").innerHTML = count + " seconds remaining!";
        if (count <= 0) {
            clearInterval(countdown);
            document.getElementById("countdown").innerHTML = "Done!";
        }
        count--;
    }, 1000);
};

解決策 2: 開始する前にでタイマーを停止します。clearInterval

var count = 10,
    startcounter = document.getElementById("stercount");

startcounter.onclick = function() {
    clearInterval(countdown);
    countdown = setInterval(function(){
        document.getElementById("countdown").innerHTML = count + " seconds remaining!";
        if (count <= 0) {
            clearInterval(countdown);
            document.getElementById("countdown").innerHTML = "Done!";
        }
        count--;
    }, 1000);
};

解決策 3: フラグとして使用できますが、使用する場合countdownは、フラグをクリアするたびに必ず null に設定する必要があります。これは、その 1 つの var を削除することを除いて、基本的にソリューション 1 と同じです。

編集:countdown onclick の上の vars リストで定義しないと、countdown-DIV が countdown-global に入力されるため、これは実際には機能しない可能性があります。

var count = 10,
    startcounter = document.getElementById("stercount");

startcounter.onclick = function() {
    if (countdown)
        return;

    countdown = setInterval(function(){
        document.getElementById("countdown").innerHTML = count + " seconds remaining!";
        if (count <= 0) {
            clearInterval(countdown);
            countdown = null;
            document.getElementById("countdown").innerHTML = "Done!";
        }
        count--;
    }, 1000);
};

ps。コードの先頭にある変数でカウントダウンを定義するのを忘れましたか、それともカウントダウンが別の場所で定義されていますか? 現在、それはグローバルであり、他のコード (ライブラリなど) によって上書きされる可能性があります。

于 2012-12-16T02:45:30.833 に答える