JQuery 슬라이드쇼의 작은 문제(문제를 찾고 해결하는 방법)_jquery

첫 번째 단계에서 슬라이드쇼를 사용해 보세요
홈페이지를 만들 때 이미지 전환 효과를 위해 슬라이드쇼[1]를 사용하고 싶었습니다. 코드의 js 부분은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

function next_slide() {
　var $active = $('#bitware-overlay img.active ');
if ($active.length == 0)
$active = $('#bitware-overlay img:last')
var $ next = $active.next().length ? $active.next() : $('#bitware-overlay img:first')
$active.addClass('last-active'); next.addClass('active');
$next.css({opacity: 0.0})
$next.animate({opacity: 1.0}, 1500, function(){
$active. RemoveClass();
});
}
$(function() {
　setInterval("next_slide()", 4000);

2단계, 발견 문제
페이지를 열 때 일반적인 테스트에서는 문제가 없었습니다. 마침내 리더는 브라우저가 동시에 여러 탭을 열고 페이지에 머물렀을 때 발견했습니다. 일정 시간 동안 탭에 나타난 사진이 마지막 사진이었다가 변경(페이드인 효과 포함)이 완료되자마자 갑자기 마지막 사진으로 이동합니다. 다음으로 변경하면:

코드 복사 코드는 다음과 같습니다.

function next_slide() {

var $active = $('#bitware-overlay img.active');
if ($active.length == 0)
$active = $('#bitware-overlay img:last ');
var $next = $active.next().length ? $active.next() : $('#bitware-overlay img:first'); 활성') ;
　$next.addClass('active');
　$next.css({opacity: 0.0})
　$next.animate({opacity: 1.0}, 1500); 🎜>　$ active.removeClass();
setTimeout("next_slide()", 4000);
}
$(function() {
setTimeout("next_slide()", 4000);
});


다른 탭에 있다가 페이지로 돌아왔을 때 사진이 올바른 순서로 표시되고 간격이 4000밀리초로 정확하다는 것을 발견했습니다. 표시했을 때 모양이 페이드되지 않고 1500ms의 애니메이션이 전혀 효과가 없는 것 같습니다. 시간이 좀 지나면 정상으로 돌아오는데, 이 현상이 지속되는 시간은 다른 탭에서 보내는 시간과 정비례하는 것 같습니다.

세 번째 단계, 문제 해결

드디어 그 이유를 알게 된 이유는 jquery의 본질이 싱글 스레드이기 때문입니다[2]. 작업이 너무 많아서 밀렸습니다. 찾아낸 최종 해결책 [4]은 다음과 같습니다.


코드 복사

코드는 다음과 같습니다. function next_slide () { var $active = $('#bitware-overlay img.active')

if ($active.length == 0)

$active = $('# bitware-overlay img :last');
var $next = $active.next().length ? $active.next() : $('#bitware-overlay img:first'); .addClass('마지막 활성');
$next.addClass('활성');
$next.css({불투명도: 0.0})
$next.animate({불투명도: 1.0 }, 1500, function(){
　$active.removeClass();
　setTimeout("next_slide()", 4000)
　}); {
setTimeout("next_slide()", 4000)
});