Question

1）代码看似简单但方法链不起作用：

$('.button').on('click', function(){
$(this).removeClass('shadow').delay(500).addClass('shadow');
 });

2）这个也不起作用：

$('.button').on('click' ,function() {
   setTimeout(function() {
    $(this).removeClass('shadow').addClass('shadow');
  }, 500);
});

3）但是这个确实！

$('.button').on('click' ,function() {
   var shadow = $(this).removeClass('shadow');
   setTimeout(function() {
   shadow.addClass('shadow');
   }, 500);
   });

我想问更有经验的编码员： 1有什么问题？什么样的附加行动3变为2中已过时？这个案例颠倒了我的var理解，因为我认为var只是某种数据持有者。

Answer 1

您的第一个代码段不起作用，因为.delay()可用于延迟动画队列而不是其他代码，这是addClass。
第二个代码段的问题是，在setTimeout内，this将指向窗口。所以从技术上讲，你是从窗口中删除一个类，而不是从你想要的元素中删除。为了克服这个问题，你可以做两件事，
您的第三个代码段正在运行，因为您不小心在那里创建了closure。因此，即使在执行click事件处理程序之后，将保留您在setTimeout内使用的变量。

这种情况的更好解决方案是，

在this中收集setTimeout之外的variable并在里面使用

$('.button').on('click' ,function() {
   var $this = this.removeClass('shadow');
   setTimeout(function() {
    $this.addClass('shadow');
  }, 500);
});

使用bind更改setTimeout，

$('.button').on('click' ,function() {
   $(this).removeClass('shadow');
   setTimeout(function() {
    $(this).addClass('shadow');
  }.bind(this), 500);
});

或者使用最近的arrow function，您可以这样做，

$('.button').on('click' ,function() {
   $(this).removeClass('shadow');
   setTimeout(() => {
    $(this).addClass('shadow');
   }, 500);
});

Answer 2

队列中有动画时使用

.delay(time)。但在您的情况下，您正在添加/删除属性/属性值。

因此，您需要使用setTimeout()的延迟：

$('.button').on('click', function(){
   var $t = $(this);
   $t.removeClass('shadow');
   setTimeout(function(){ $t.addClass('shadow'); }, 500);
});

第一个问题是添加/删除属性/属性值不会被添加到队列中。
第二个问题是setTimeout中的匿名函数有自己的范围，$(this)没有引用$('.button')。
第三个问题是您没有引用shadow变量中的元素。如果您执行以下var shadow = $(this);检查，则最有可能发挥作用：

$('.button').on('click' ,function() {
   var shadow = $(this);
   shadow.removeClass('shadow');
   setTimeout(function() {
      shadow.addClass('shadow');
   }, 500);
});

jQuery方法链接＆amp; var意味着意外

2 个答案: