将此与setTimeOut函数一起使用将停止工作

Question

我创建了一个函数来循环使用.each函数在父div中循环div，名为“rolloverimages”。我希望在每一张正在生成的图像之间有一个延迟，所以我正在使用setTimeOut。我的问题是，一旦我添加了setTimeOut函数，使用this的变量就与主rollovers变量无关。

有人能帮忙吗？

function rolloverImages() {

    $('.thumbnail-wrapper').one('mouseover', function() {
        var rollovers = $(this).find('.rolloverimages div');
        var time = 0;

        rollovers.each(function() {
            setTimeout(function() {
                var datasrc = $(this).data('hover');
                var img = $('<img id="dynamic">');
                var imgsrc = img.attr('src', datasrc);
                var parent = $(this).parent('.rolloverimages').parent('.thumbnail-wrapper');
                console.log(parent);
            }, time);
            time += 2000;
        });
    }); 
}

Answer 1

您必须在that=this调用之前添加var setTimeout (并使用它而不是此)，或者将函数绑定到以下内容：

function rolloverImages() {

          $('.thumbnail-wrapper').one('mouseover', function() {
            var rollovers = $(this).find('.rolloverimages div');
            var time = 0;

            rollovers.each(function() {
               setTimeout(function() {
                  var datasrc = $(this).data('hover');
                  var img = $('<img id="dynamic">');
                  var imgsrc = img.attr('src', datasrc);
                  var parent = $(this).parent('.rolloverimages').parent('.thumbnail-wrapper');
                  console.log(parent);
                }.bind(this), time);
                time += 2000;
            });

        });

    }