Question

我正在制作可使用的照片滑块，但更改箭头时遇到问题。当您单击箭头时，图片应淡出，然后更改，新图片将淡入，但是我的代码先执行图片淡入淡出，然后再进行动画淡化。帮助

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

无效，因为您传递的是string而不是function。而且您不希望使用括号，因为那样会立即调用函数，而无需等待实际时间流逝。将它们更改为：

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

请记住，它们始终是匿名函数或对函数的引用。除非要在执行的那一行立即调用括号，否则切勿放入括号。

在setTimeout和nextSlide中创建的previousSlide被颠倒并带有括号。将它们分别更改为：

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

除了您的逻辑是否正确之外，我无法验证，但这只是一些立即的错误。

Answer 2

您的setTimeout语法在以下三个位置不可用：

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

应为（删除括号和引号）：

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

和

setTimeout(1000, changeSlide());

应为（更改顺序并删除括号）

setTimeout(changeSlide, 500);

setTimeout有两个参数，第一个参数是超时到期后应调用的函数，第二个参数是以毫秒为单位的超时。如果包含括号，则会立即调用该函数，这就是为什么幻灯片更改发生在淡出之前的原因：

function alertFirst() {
  console.log("I should be first");
}

function alertSecond() {
  console.log("I should be second");
}

setTimeout(alertFirst, 500);
setTimeout(alertSecond(), 5000);
//                     ^
//                     |
//       Note the parentheses

通过这些更改，它可以按您的预期（可能）工作：https://codepen.io/fdebijl/pen/WBLVYm

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

2 个答案: