Question

var colors = Array('#2a83bd', '#982426', '#088C51', '#CADB1B');
var color_index = 0;
var interval = 1000;  // transition speed

function tbc_fadebg() {
    $('#topbanner_container').animate({ backgroundColor: colors[color_index] }, interval, 'linear', function() {
        if(color_index == colors.length) { color_index = 0; } //If we are at the end of the colors array go back to the beginning.
        else { color_index++; } //Lets move to the next color in the colors array.
        tbc_fadebg();
    }); 
}

$(document).ready(function() {
    if( $(window).width() > 1024 ) {
        tbc_fadebg();
    }
});

以上是我的代码。如何在此后台循环中暂停每种背景颜色5秒钟以及在何处放置代码？我试图设置超时，但显然我做错了，无法弄清楚将它放在这个代码中的位置。

Answer 1

尝试使用setInterval()，删除recursive来电，

var colors = Array('#2a83bd', '#982426', '#088C51', '#CADB1B');
var color_index = 0;
var interval = 1000;  // transition speed

function tbc_fadebg() {
    $('#topbanner_container').animate({ backgroundColor: colors[color_index] }, interval, 'linear', function() {
        if(color_index == colors.length) { color_index = 0; } //If we are at the end of the colors array go back to the beginning.
        else { color_index++; } //Lets move to the next color in the colors array.
    }); 
}

$(document).ready(function() {
    if( $(window).width() > 1024 ) {
        setInterval(tbc_fadebg,5000);
    }
});

Answer 2

在再次调用该函数之前，您可以拥有setTimeout()。

function tbc_fadebg() {
    $('#topbanner_container').animate({ backgroundColor: colors[color_index] }, interval, 'linear', function() {
        if(color_index == colors.length) { color_index = 0; } //If we are at the end of the colors array go back to the beginning.
        else { color_index++; } //Lets move to the next color in the colors array.
        setTimeout(tbc_fadebg, 5000); // I added here, when calling the function again
    }); 
}

Javascript / Jquery：如何在后台循环中暂停每种背景颜色5秒？

2 个答案: