Javascript中for循环中的setInterval

a setInterval within a for loop in Javascript

本文关键字：setInterval for Javascript 循环      更新时间：2023-09-26

下面的代码需要在for循环中放入一个setInterval。我基本上需要在for循环的下一次迭代之间暂停10秒。这是一个非常基本的脚本，它在进入下一个div之前，在div中显示横幅10秒钟。它现有的setInterval是我从另一个网站上得到的代码，因为我没有选择了。有什么帮助吗？如果你不介意向我解释逻辑，让我知道未来：）

$("document").ready(function() {
// bannerChange
function bannerChange(banner,div,milliseconds) {
    var length = banner.length;
    for(i=0;i<length;i++) {
        (function(i) {
            setInterval(function() {
                var url = banners[i].url;
                var img = banners[i].image;
                $("#"+div).html("<a href='"+url+"' target='_Blank'><img src='www/images/banners/"+img+"' /></a>");
            },milliseconds)
        })(i);
    }
}
function showBanner(bannerName, bannerDiv, milliseconds) {
    var url = "www/scripts/ajax/getBanners.php";
    $.post(url, {name: bannerName}, function(data) {
        if(data.response == true) {
            bannerChange(data.banners,bannerDiv,milliseconds);
        }
    });
}
// Run banners
showBanner("Test Banner","test",10000);
});

以下是基于注释的更新版本：

// Start by getting the banners:
var banners = [];
var currentBanner;
function getBannersFromServer(...) {
    // TODO: make ajax call to server for banners
    // push the banners into a queue for later
    for (var i in bannerFromServer) {
        banners.push(bannersFromServer[i]);
    }
}
// Then run through them:
function showNextBanner() {
    // advance to next banner
    currentBanner++
    // go back to the beginning after the last banner is displayed
    if(currentBanner >= banners.length) currentBanner = 0;
    // pull a banner out of the queue
    var banner = banners[currentBanner];
    // TODO: Show the banner in the div
    // do it again in 10 seconds
    showNextBanner();
}
// start it all
getBannersFromServer();
getNextBanner();

尝试使用：

.delay()

下面是这个函数的一个很好的例子！

试试这个

var i=0;//Global Variable
function bannerChange(banner, div, milliseconds) {
    var length = banner.length;
    setInterval(function() {
        var url = banners[i].url;
        var img = banners[i].image;
        $("#"+div).html("<a href='"+url+"' target='_Blank'><img src='www/images/banners/"+img+"' /></a>");
        i++;
        if(i >= length) i=0;//To reiterate from first
    },milliseconds);            
 }

希望这能解决你的问题。

相关文章：