在setTimeout（）中使用$（this）;
我想在jQuery中动态设置超时。 动态设置的超时函数需要使用$（“this”），但我似乎无法使它工作。
一个例子：
$("div").each(function(){ var content = $(this).attr('data-content') setTimeout("$(this).html('"+content+"')",$(this).attr('data-delay')); }); http://jsfiddle.net/qmhmQ/
做这个的最好方式是什么？
$("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 ie $(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
您的代码应如下所示：
-
传递函数而不是字符串。 说明：将字符串传递给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，这是最干净的方法。
使用闭包（ 一些 教程 ）。
使用带有setTimeout字符串不是一个好主意。 还要注意this ，因为如果在闭包内使用它可以改变它的上下文（ 即调用站点 ）。
如果使用数据属性，则可以使用jQuery数据function。
$("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; }
我只是扩大上面的答案，
- 使用class或id在JavaScript中引用div。 这样可以避免页面中出现进一步的标记名称冲突。
所以你更新的HTML是，
现在您更新的JavaScript代码是，
$(".dv").each(function(){ var content = $(this).attr('data-content'), $this = $(this); setTimeout(function() { $this.html(content); }, $this.attr('data-delay')); });
主线是哪里
$ this = $（this）;
我们将当前元素分配给setTimeout函数中使用的变量。
请参阅此链接
将$（this）从settimeout中取出并将其保存在局部变量中，在$（“div”）后面说’self’。each （function（）{ this line
var self=$(this);
并进一步使用自我 。
以下似乎是对空白，可读性和启示意图的良好妥协。
$('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/