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;
    }
})();

有关闭包的更多信息here。

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);
});

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

3 个答案: