Question

我有以下代码：

$(document).ready(function() {
    $('button').each(function(index){
    var time = index * 1000;
    setInterval(function(){
        $(this).toggleClass('one two');
    }, time);
  });
});

这应该在设定的间隔时间内在两个类之间循环，但它不起作用。为什么呢？

Answer 1

您的代码不起作用，因为JavaScript使用的是一个名为lexical scoping的概念。这定义了如何在嵌套函数中解析变量名称。

在您的情况下$(this)不是您认为的那样。将匿名函数传递给setInterval时，this绑定到setInterval。 JavaScript中最重要的概念之一是范围如何绑定到“this”。

了解有关范围界定的更多信息

http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this
https://spin.atomicobject.com/2014/10/20/javascript-scope-closures

工作示例

https://jsfiddle.net/00w2ythq/1/

$('button').each(function(index){
    var time = index * 1000;
    var button = $(this); // this is bound to .each()

    setInterval(function(){
        // scope changed, this is bound to window
        button.toggleClass('one');
    }, time);
});

Answer 2

在您的代码this中引用setInterval function scope，因此为了引用您需要将其分配给另一个变量的按钮

$('button').each(function(index){
  var time = index * 1000;
  var self = $(this);
    setInterval(function(){
    self.toggleClass('one');
  }, time);
});

<强> JSFIDDLE

Answer 3

内部setInterval回调this引用window对象而不是元素对象。因此，要么将引用存储在变量中，就像在另一个答案中一样，并在回调中使用它，或者使用 Function.prototype.bind() 将this上下文绑定到setInterval回调函数

$(document).ready(function() {
    $('button').each(function(index){
      var time = index * 1000;
      setInterval(function(){
        $(this).toggleClass('one');
      }.bind(this), time);
  });
});

$(document).ready(function() {
  $('button').each(function(index) {
    var time = index * 1000;
    setInterval(function() {
      $(this).toggleClass('one');
    }.bind(this), time);
  });
});

.one {
  background: #000
}
.two {
  background: #f00
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="one">Button</button>
<button class="one">Button</button>
<button class="one">Button</button>
<button class="one">Button</button>
<button class="one">Button</button>
<button class="one">Button</button>

对于较旧的浏览器，请检查polyfill option for bind method。

setInterval上的JQuery toggleClass不起作用

3 个答案:

了解有关范围界定的更多信息

工作示例