窗口浏览器外的计数器停止

Counter stop out of the window browser

本文关键字：计数器 浏览器 窗口      更新时间：2023-09-26

im 尝试创建一个计数器，问题是 im 试图使计数器仅在用户在窗口中运行时运行，如果用户走出窗口或到另一个分隔符，计数器应该停止直到他回来。

这是我的代码：

$(window).blur(function(){
console.log("Counter Should Stop");
});
$(window).focus(function(){
window.onload = function(){
(function(){
  var counter = 10;
  setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    // Display 'counter' wherever you want to display it.
    if (counter === 0) {
        alert('this is where it happens');
        clearInterval(counter);
    }
  }, 1000);
})();
}
});

您遇到了一些范围问题以及嵌套函数问题。为了提高可读性，以及帮助您进行调试，我建议将其重构为每个事件的单独函数名称。这也有助于提高可重用性。

这应该可以满足您的需求：

(function(){
  // your global variables
  var span = document.getElementById("count");
  var counter = 10;
  var timer;
  // your helpers
  var startTimer = function() {
    // do nothing if timer is already running
    if (timer) return;
    timer = setInterval(function() {
      counter--;
      if (counter >= 0) {
        span.innerHTML = counter;
      }
      // Display 'counter' wherever you want to display it.
      if (counter === 0) {
          alert('this is where it happens');
          stopTimer();
      }
    }, 1000);
  };
  var stopTimer = function() {
    clearInterval(timer);
    timer = null;
  };
  // your handlers
  var onBlur = function() {
    stopTimer();
  };
  var onFocus = function() {
    startTimer();
  };
  var onLoad = function() {
    startTimer();
  };

  // assign your handlers
  $(window).load(onLoad);
  $(window).blur(onBlur);
  $(window).focus(onFocus);
})();
相关文章：