Question

我有31张图片，我想一个接一个地显示它们作为div的背景。当用户将鼠标悬停在div上时，我只希望它能够改变。我现在的问题是它只是快速翻转所有图像。我试图使用setTimeout，但它无法正常工作。如何使延迟工作？ div的名称是About_Me_Block，图像名为frame1.gif，frame2.gif ......等

这是我的代码：

function changeImg(counter) {
    $('#About_Me_Block').attr("style", "background-image: url(playGif/frame" + counter + ".gif);");
}

$(document).ready(function() {
    var hoverAnimate = []
    "use strict";
    $('#About_Me_Block').mouseenter(function() {
        hoverAnimate[0] = true;
        var counter = 0;

        while (hoverAnimate[0]) {
            console.log(counter);
            setTimeout(changeImg(counter), 1000);
            counter++;
            if (counter === 32)
                hoverAnimate[0] = false;
        }
    });
    $('#About_Me_Block').mouseleave(function() {
        hoverAnimate[0] = false;
        $(this).attr("style", "background-image: url(play.jpeg);");
    });
});

Answer 1

setTimeout没有等待函数结束，它可以在其他语言中运行lile线程。

要实现您想要的效果，您需要从changeImg函数调用setTimeout。

var counter = 0;
$(document).ready(function() {
    var hoverAnimate = []
    "use strict";
    $('#About_Me_Block').mouseenter(function() {
        hoverAnimate[0] = true;
        counter = 0;
        changeImg();
    });
    $('#About_Me_Block').mouseleave(function() {
        hoverAnimate[0] = false;
        $(this).attr("style", "background-image: url(play.jpeg);");
     });
 });

function changeImg() {
    $('#About_Me_Block').attr("style", "background-image: url(playGif/frame" + counter + ".gif);");
    counter++;
    if (counter < 32 && hoverAnimate[0]) {
        setTimeout(changeImg, 1000);
    } else {
        hoverAnimate[0] = false;
    }
}

Answer 2

它们一次发生的原因是while语句没有延迟，因此所有setTimeout都会同时设置，因此，调用changeImg全部一旦。

要解决此问题，您可以将setTimeout替换为setInterval。您可以只调用while

，而不是使用setInterval

var counter = 0;
var myTimer = setInterval(changeImg, 1000);

并在每次调用counter时更新changeImg。循环后，不要忘记

clearInterval(myTimer)

Answer 3

您似乎需要了解setTimeout的工作原理。它基本上会提示在经过给定的毫秒数后运行函数。因此，当您执行setTimeout(changImg(counter), 1000)时，您正在调用changImg(counter)并返回undefined。产生这个setTimeout(undefined, 1000)就是为什么它翻转得非常快。

因此，您可以使用bind来允许稍后使用该参数调用该函数。此外，请确保在使用clearTimeout完成后删除提醒。

function changeImg(counter) {
    $('#About_Me_Block').attr("style", "background-image: url(playGif/frame" + counter + ".gif);");
}

$(document).ready(function() {
    var hoverAnimate = false, id;
    function loop(counter) {
        if(hoverAnimate || counter < 32) {
            changeImg(counter);
            id = setTimeout(loop.bind(this, counter++), 1000);
        }
    }
    $('#About_Me_Block').mouseenter(function() {
        hoverAnimate = true;

        id = setTimeout(loop.bind(this, 0), 1000);
    });
    $('#About_Me_Block').mouseleave(function() {
        hoverAnimate = false;
        // Don't want a reminder for a random counter to wake up.
        clearTimeout(id);
        $(this).attr("style", "background-image: url(play.jpeg);");
    });
});

Answer 4

定时器的两种方法 - setTimeout和SetInterval（单次/重复）

// setInterval is also in milliseconds
var intervalHandle = setInterval(<yourFuncToChangeImage>,5000);

//this handle loop and make example loop stop
yourelement.yourEvent = function() {
clearInterval(intervalHandle);
};

使用setTimeout更改背景图像

4 个答案: