我有一段代码
var wsr = $('#work-sample-row');
for (var i = 0, n = newRows.length; i < n; ++i)
{
var thisBox = box.clone();
var thisNewRow = newRows[i];
thisBox.find('.work-item-preview-outer').css('background-image', 'url(' + thisNewRow['imageurl'] + ')');
thisBox.find('.work-title').text(thisNewRow['title']);
thisBox.find('.work-descr-short').text(thisNewRow['sumsmall']);
thisBox.find('.work-link-wrap').attr('href', siteUrl + '/our-work/ ' + workUrlPiece + '?id=' + thisNewRow['id']);
wsr.append(thisBox);
setTimeout(function(){thisBox.css('opacity','1');}, i * 300);
}
用于将 n
个子项添加到 div
并通过显示 opacity
来动画化它们的外观(以及 CSS3 transition
) 每一个开始出现之间有 300 毫秒。但出于某种原因,它只适用于最后添加的一个。因此,我将代码的末尾更改为
//setTimeout(function(){thisBox.css('opacity','1');}, i * 300);
}
k = 1;
wsr.children().each(function(){
var that = $(this);
setTimeout(function(){that.css('opacity','1');}, (k++) * 300);
});
这行得通,但当然这并不优雅,因为我每个人都再次遍历元素。我怎样才能使第一种方法起作用?
最佳答案
那是因为当执行 setTimeout
回调时,thisBox
变量引用最后一个克隆的对象。 JavaScript(非 ECMAScript 2015)不支持 block 范围功能。
您可以使用一个立即调用的函数,它类似于您的 each
回调创建一个新的范围。
for (var i = 0, n = newRows.length; i < n; ++i) {
var thisBox = box.clone();
// ...
(function(box, index) {
setTimeout(function(){ box.css('opacity','1');}, index * 300);
})(thisBox, i);
}
关于javascript - 我如何解释 setTimeout 的这种行为?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32321322/