Javascript setInterval上的JQuery toggleClass不工作

我有以下代码：

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

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

---

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

您的代码无法工作，因为JavaScript使用了一个称为词法作用域的概念。这定义了如何在嵌套函数中解析变量名

在你的情况下，

$（这个）

不是你想象的那样

当您将匿名函数传递给setInterval时，此

绑定到

setInterval

。JavaScript中最重要的概念之一是作用域如何绑定到“this”

了解有关作用域的更多信息

工作示例

---

您的代码无法工作，因为JavaScript使用了一个称为词法作用域的概念。这定义了如何在嵌套函数中解析变量名

在你的情况下，

$（这个）

不是你想象的那样

当您将匿名函数传递给setInterval时，此

绑定到

setInterval

。JavaScript中最重要的概念之一是作用域如何绑定到“this”

了解有关作用域的更多信息

工作示例

---

在代码中，此引用了

setInterval函数范围

，因此，为了引用按钮，需要将其分配给另一个变量

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

---

在您的代码

中，此

指的是

设置间隔功能范围

，因此为了引用按钮，您需要将其分配给另一个变量

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

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

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

---

内部setInterval回调

此

指的是

窗口

对象，而不是元素对象。因此，要么像在另一个答案中一样将引用存储在变量中，并在回调中使用它，要么使用将

此

上下文绑定到

setInterval

回调函数

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

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

$（文档）.ready（函数（）{
$（“按钮”）。每个（函数（索引）{
var时间=指数*1000；
setInterval（函数（）{
$（this.toggleClass（'one'）；
}.绑定（此），时间）；
});
});
.one{
背景：#000
}
.二{
背景：#f00
}

按钮
按钮
按钮
按钮
按钮
按钮
在setInterval回调中
此
指的是
窗口
对象，而不是元素对象。因此，要么像在另一个答案中一样将引用存储在变量中，并在回调中使用它，要么使用将
此
上下文绑定到
setInterval
回调函数

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

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


$（文档）.ready（函数（）{
$（“按钮”）。每个（函数（索引）{
var时间=指数*1000；
setInterval（函数（）{
$（this.toggleClass（'one'）；
}.绑定（此），时间）；
});
});
.one{
背景：#000
}
.二{
背景：#f00
}

按钮
按钮
按钮
按钮
按钮
按钮