如何将变量传递给setTimeout？

here is my attend:

这是我的出席:

  $('md-card').each(function(index){
    setTimeout(function(){
      $(this).addClass('hietim');
    },500*index);
  });

The goal is to have a hierarchical timing for the md-card elements.

目标是为md-card元素设置分层时序。

It didn't work because $(this) means nothing inside the setTimeout(function(){}). I also tried:

它没有用,因为$(this)在setTimeout(function(){})中没有任何意义。我也尝试过:

  $('md-card').each(function(index){
    var e = $(this)
    setTimeout(function(e){
      e.addClass('hietim');
    },500*index);
  });

It will pop a jquery error. Also tried:

它会弹出一个jquery错误。还尝试过:

  $('md-card').each(function(index){
    $(this).delay(500*index).addClass('hietim');
  });

It fails because delay() doesn't seem to work with addClass.

它失败,因为delay()似乎不适用于addClass。

3 个解决方案

#1

The second option should work as long as you don't pass the variable into the function. It will then pass a reference to e creating a closure which will allow the function to use that variable when the setTimeout finishes regardless of whether or not that scope continues to exist.

只要您不将变量传递给函数,第二个选项就应该有效。然后它会传递一个引用来创建一个闭包,当setTimeout完成时,该闭包将允许函数使用该变量,而不管该作用域是否继续存在。

$('md-card').each(function(index){
var e = $(this)
setTimeout(function(){  // Remove the e here
  e.addClass('hietim');
},500*index);

});

#2

Even you can try this way also

即便你也可以尝试这种方式

$('md-card').each(function(index){
setTimeout(function(thisObj){
  thisObj.addClass('hietim');
},500*index,$(this));
});

Take a look clarification of setTimeout function detail here.

请在此处查看setTimeout函数详细信息。

#3

-1

For this purpose I used the element's offset (from top and left).

为此,我使用了元素的偏移量(从顶部和左侧)。

You can see the source code of my jQuery plugin on github.

你可以在github上看到我的jQuery插件的源代码。

$('md-card').each(function(index){
    var element = $(this);
    var elementOffset = element.position();
    var calculatedOffset = elementOffset.left * 0.8 + elementOffset.top;
    var timeOut = parseFloat(calculatedOffset / 15).toFixed(2);
    setTimeout(function(){
        element.addClass('hietim');
    }, timeOut*index);
});

#1

$('md-card').each(function(index){
var e = $(this)
setTimeout(function(){  // Remove the e here
  e.addClass('hietim');
},500*index);

});

#2