javascript - 淡出前图片更改 - setTimeout 不起作用

Question

我正在制作一个可以工作的照片 slider ，但我在更改箭头时遇到问题。当您单击箭头时，图片应该淡出、更改，然后新图片淡入，但我的代码在执行淡入淡出动画后首先更改图片。帮助

var slidenumber = Math.floor(Math.random() * 5) + 1;
var timerforslide = 0;
var timerforfade = 0;

function hideSlide() {
    $("#slide").stop();
    $("#slide").fadeOut(500);
}

function changeSlide() {
    resetSlideTimers();
    slidenumber++;
    if (slidenumber > 5) slidenumber = 1;
    if (slidenumber<1) slidenumber = 5;
    timerforfade = setTimeout("hideSlide()", 4500);
    timerforslide = setTimeout("changeSlide()", 5000);
    $("#slide").fadeIn(500);
    var file = "<img src=\"img/slide" + slidenumber + ".png\" width =\"100%\" height=\"300px\" /> "
    document.getElementById("slide").innerHTML = file;



}

function resetSlideTimers() {
    clearTimeout(timerforfade);
    clearTimeout(timerforslide);
}

function nextSlide() {
    $("#slide").stop();
    resetSlideTimers();
    hideSlide();
    setTimeout(1000, changeSlide());

}

function previousSlide() {
    $("#slide").stop();
    resetSlideTimers();
    slidenumber = slidenumber - 2;
    hideSlide();
    setTimeout(500, changeSlide());
}

Answer 1

当您创建 setTimeout 调用时，第一个参数可以是匿名函数，也可以是对另一个函数的引用。第二个参数是调用该函数所需的时间。

因此，您的两个函数调用设置如下:

timerforfade = setTimeout("hideSlide()", 4500);
timerforslide = setTimeout("changeSlide()", 5000);

无效，因为您传递的是字符串而不是函数。并且您不想使用括号，因为这将立即调用该函数，而无需等待实际时间流逝发生。将它们更改为:

timerforfade = setTimeout(hideSlide, 4500);
timerforslide = setTimeout(changeSlide, 5000);

请记住，它们始终是匿名函数或对函数的引用。切勿放置括号，除非应在该执行行立即调用它。

并且在 nextSlide 和 previousSlide 中创建的 setTimeout 是相反的并且有括号。将它们分别更改为:

//Next slide function
setTimeout(changeSlide, 1000);
//Previous slide function
setTimeout(changeSlide, 500);

我无法验证您现在的逻辑是否正确，但这些都是一些直接错误。