Stoppen Sie jede Schleife bei Maus verlassen

Question

Ich habe einen Anker mit einem Datenattribut (ein Objekt von Bildern), auf Mouseenter möchte ich diese Bilder durchlaufen, dann auf mouseleave möchte ich diese Schleife zu beenden.

Hier ist, was ich bisher habe, aber es scheint, die volle each läuft, vor der shouldRotateImages Variablen ändern, auch mit der Verzögerung. Ich bin also etwas verloren, was ich jetzt tun kann.

var shouldRotateThumbnails = false; 
$(document).on('mouseenter', '#videos-list a', function() { 
    shouldRotateThumbnails = true; 
    rotateThumbnails($(this)); 
}); 

$(document).on('mouseleave', '#videos-list a', function() { 
    shouldRotateThumbnails = false; 
}); 

function rotateThumbnails(video) { 
    var thumbnails = video.data('thumbnails'); 
    var image = video.find('img'); 
    $.each(thumbnails, function (k, v) { 
     if (!shouldRotateThumbnails) { 
      return false; 
     } 
     setTimeout(function() { 
      image.attr('src', v); 
     }, (300 * k)); 
    }); 
} 

Answer 1

Verwaltet, um dies mithilfe von @ Schielen Vorschlag zu tun.

var t; 
$(document).on('mouseenter', '#videos-list a', function() { 
    var imageKey = 0; 
    var thumbnails = $(this).data('thumbnails'); 
    var image = $(this).find('img'); 
    t = setInterval(function() { 
     image.attr('src', thumbnails[imageKey]); 
     imageKey += 1; 
     if (imageKey == thumbnails.length) { 
      imageKey = 0; 
     } 
    }, 300); 
}); 
$(document).on('mouseleave', '#videos-list a', function() { 
    clearInterval(t); 
    var image = $(this).find('img'); 
    var thumbnail = $(this).data('original-thumbnail'); 
    image.attr('src', thumbnail); 
});