javascript - 在 JavaScript 中持久化变量而不是全局变量

Question

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

为此，我可以在所有内容的顶部添加一个全局变量：

toggleOn = false; 

然后，在里面<button onClick="...，我可以有：

toggleOn =! toggleOn;
foo(); 
function foo() {
  // do my stuff
  if (toggleOn) {
    setTimeout(foo, 5000);
  }
}

但问题是，我绝不能使用全局变量来完成相同的任务。我该怎么做？是否存在可以携带超出其范围的值的持久变量？

Answer 1

这是一个例子，说明闭包是语言的一大特色。

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

        active = !active;
    }
})();

更多关于关闭这里。

Answer 2

使用 javascript 模块模式。像这样的东西：

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

用作handler您的按钮onclick处理程序。

Answer 3

较早的答案已经指出，您可以使用闭包来存储将跟踪状态的“私有”变量。或者，您也可以使用 HTML5 数据来存储它。

html

<button data-toggleOn="false">Click me!</button>

javascript

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

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

如果你使用 jQuery..

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