在JavaScript中保留变量而不是全局变量

我想有一个按钮，同时作为“开始”和“停止”按钮，用于一些重复发生的定时事件

要做到这一点，我可以在所有内容的顶部设置一个全局变量：

toggleOn = false; 

---

然后，在

的内部使用javascript模块模式。大概是这样的：

var handler = function () {
  var private_state = true;
  return function() {
    private_state = !private_state;
    if (private_state) {
      // Do something
    }
  }
}();

使用
handler
作为按钮
onclick
handler。
这是一个闭包是语言的重要特性的例子

(function()
{
    var active = false;
    myButton.addEventListener('click', function myButtonClick(event)
    {
        if (active) {
            // recursion..?
            setTimeout(myButtonClick, 5000);
        }

        active = !active;
    }
})();

更多关于闭包的信息
 前面的答案已经指出，您可以使用闭包存储一个“私有”变量来跟踪状态。或者，您也可以使用HTML5数据来存储这些数据

html

如果您使用的是jQuery

$('button').click(function() {
  var toggleOn = !$(this).data('toggleOn');
  $(this).data('toggleOn', toggleOn);
});

在按钮本身上设置一个道具，如下所示。忙碌=！这个.忙,@丹达维斯：这听起来很棒。请详细说明一下，并提供一些代码片段好吗？在DOM引用上设置属性（如dandavis建议的/按钮）会导致旧浏览器内存泄漏。您最好将其包装在函数中，以便像jods演示的那样关闭作用域。@cbayram：事件处理程序的关闭也是如此。此外，这些警告不是针对IE6吗？更重要的是，泄漏一个布尔值？老兄，那会很快毁掉一切。或者，如果你想保持冷静，可以使用classList.toggle。@dandavis无意伤害你的感情，只是陈述一个事实。IE7也有一定程度，刷新页面会将其清理干净。在处理了在浏览器中保持打开状态达数天/数周的IE6 web应用程序后，这已成为现实。糟糕的做法就是糟糕的做法，今天是布尔值，明天是你的全部数据：）你缺少几个参数来包装即时函数有趣的是，你不需要它们。想想看，我猜你每天都学到了新东西=）。不过，这会不会让旧的浏览器绊倒？不知道是哪个浏览器/为什么
function（）{}
是一个表达式，我们称之为
X
。现在在语句
var y=X（）中，调用
（）
的优先级始终高于分配
=
。JS在这方面已经很久没有改变了。
<button data-toggleOn="false">Click me!</button>

button.addEventListener('click', function() {
  var toggleOn = this.dataset.toggleOn = !JSON.parse(this.dataset.toggleOn);

  if (toggleOn) {
    // do stuff!
  }
});

$('button').click(function() {
  var toggleOn = !$(this).data('toggleOn');
  $(this).data('toggleOn', toggleOn);
});