Использование этого с setTimeOut перестало работать

Question

Я создал функцию для обхода элементов div в родительском элементе div, называемую rolloverimages, используя функцию .each. Я хочу, чтобы была задержка между каждым генерируемым изображением, поэтому я использую 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

Вы должны либо добавить var that = this перед вызовом 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;
            });

        });

    }