Question

我想在jQuery中动态设置超时。动态设置的超时函数需要使用$（“this”），但我似乎无法使它工作。

一个例子：

$("div").each(function(){
    var content = $(this).attr('data-content')
    setTimeout("$(this).html('"+content+"')",$(this).attr('data-delay'));
});

http://jsfiddle.net/qmhmQ/

这样做的最佳方式是什么？

Answer 1

$("div").each(function(){
    var content = $(this).attr('data-content'),
        $this = $(this); // here $this keeps the reference of $(this)
    setTimeout(function() {

      // within this funciton you can't get the $(this) because
      // $(this) resides within in the scope of .each() function i.e $(this)
      // is an asset of .each() not setTimeout()
      // so to get $(this) here, we store it within a variable (here: $this) 
      // and then using it

        $this.html(content);
    }, $this.attr('data-delay'));
});

<强> DEMO

Answer 2

您的代码应如下所示：

传递函数而不是字符串。说明：将字符串传递给setTimeout时会出现问题，因为它运行的范围与原始范围不同，因此会出错。

使用jQuery data()方法

$("div").each(function(){
     var content = $(this).attr('data-content'),
         $el = $(this),
         setContent = function(){
            $el.html(content);
         }
     setTimeout(setContent,$el.data('delay'));
});

您可以为变量分配函数并将该变量作为参数传递给setTimeout，这是最简洁的方法。

Answer 3

使用闭包（some tutorials）。

使用setTimeout字符串不是一个好主意。另请注意this，因为如果在闭包内使用它可以更改其上下文（ie. call-site）。

如果使用数据属性，则可以使用jQuery数据函数。

$("div").each(function() {
  var instance = $(this);
  var content = instance.data('content');
  var method = function() {
    instance.html(content);
  };
  setTimeout(method, instance.data('delay'));
});

div {
  border: 1px solid black;
  margin: 5px;
  height: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-content="fus" data-delay="1000"></div>
<div data-content="ro" data-delay="2000"></div>
<div data-content="dah" data-delay="5000"></div>

Answer 4

我只是在扩展上面的答案，

使用class或id在JavaScript中引用div。这样可以避免页面中出现更多标记名称冲突。

所以你更新的HTML是，

<div data-content="fus" data-delay="1000" class="dv"></div>
<div data-content="ro" data-delay="2000" class="dv"></div>
<div data-content="dah" data-delay="5000" class="dv"></div>

现在您更新的JavaScript代码是

$(".dv").each(function(){
    var content = $(this).attr('data-content'),
    $this = $(this);
    setTimeout(function() {
       $this.html(content);
    }, $this.attr('data-delay'));
});

主线是

$ this = $（this）;

我们将当前元素分配给setTimeout函数中使用的变量。

请参阅此link

Answer 5

将$（this）从settimeout中取出并将其保存在本地变量中，在 $（“div”）之后说'self'。each（function（）{ this line

var self=$(this);

并进一步使用 self 。

Answer 6

以下似乎是对空白，可读性和启示意图的良好妥协。

$('div').each(function(){
    var element = $(this)
    var content = element.attr('data-content')
    var delayms = element.attr('data-delay')
    var action = function() { element.html(content) }

    setTimeout(action, delayms)
})

见：http://jsfiddle.net/wilmoore/LSs6g/

在setTimeout（）中使用$（this）;

6 个答案: