마우스를 놓을 때 각 루프를 멈추십시오.

데이터 속성 (이미지 개체)이있는 앵커가 있습니다.이 이미지를 반복하고 싶습니다. 마우스를 뽑으면이 루프가 끝납니다.마우스를 놓을 때 각 루프를 멈추십시오.

여기까지 내가 가지고있는 것이지만, shouldRotateImages 변수가 변경되기 전에 지연이 있어도 전체 each이 실행됩니다. 그래서 나는 지금 내가 할 수있는 것에 관해서는 조금 잃어 버렸다.

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)); 
    }); 
}

출처

2017-05-05 Karl

코드는 비동기이며 나중에 실행되도록 예약되어 있습니다. 타이머를 지우지 않는 한 아무런 문제가 없습니다. '$ .each()'와 같은 루핑 구조를 사용하지 말고, 대신에 마지막 이미지를 얻을 때 또는'shouldRotateThumbnails'가'false'가 될 때, 어느 쪽이든 먼저 오는 쪽을 지우는'setInterval'을 사용하는 것이 좋습니다. –

그게 바로 내가 필요한 것입니다, 감사합니다! – Karl

당신을 진심으로 환영합니다. –

@ squint의 제안을 사용하여 이렇게 관리해야합니다.

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); 
});

출처

2017-05-05 18:02:02 Karl

마우스를 놓을 때 각 루프를 멈추십시오.

답변

관련 문제