Question

我正在尝试构建一个颜色选择器，它使用下拉列表中的rgba值来更改叠加层的颜色。当值为“选择颜色”时，我希望它循环显示所有可用的颜色。

以下代码完全按照我的喜好执行，但是当窗口加载时我无法运行它。我已经尝试了文档就绪和可以想象的窗口加载的每种组合。

我怀疑它可能与超时或事件监听器冲突，因为窗口警告完全没问题。

以下是我正在使用的内容：

var colorList = new Array();
$('#color-select option').each(function() {
    colorList.push($(this).val())
});
var colorListLength = colorList.length;
var currentColor;
var rainbowTimeout; // setTimeout variable

$("#color-select").change(function(){
    clearTimeout(rainbowTimeout);
    currentColor = $(this).val();
    if( currentColor == "pick a color"){
        rainbow();
    }else{
        $(".overlay").css("background-color",currentColor);
    }
});

var rainbowCounter = 1; // avoids "pick a color"
function rainbow(){
    $(".overlay").css("background-color",colorList[rainbowCounter]);
    rainbowCounter++;
    if( rainbowCounter == colorListLength ){
        rainbowCounter = 1; 
    }
    if(currentColor == "pick a colour"){
        rainbowTimeout = setTimeout(function(){
            rainbow();
        },1500);
    }
}

我不知道在哪里调用rainbow（）来启动这个过程。谁能告诉我可能导致问题的原因？

Answer 1

我在代码中的任何地方都看不到$(document).ready()。所以如果你问如何执行你在页面加载时显示的代码，你可能想要这样的东西，

$(document).ready(function() {
    var colorList = new Array();
    $('#color-select option').each(function() {
        colorList.push($(this).val())
    });
    var colorListLength = colorList.length;
    var currentColor;
    var rainbowTimeout; // setTimeout variable

    $("#color-select").change(function(){
        clearTimeout(rainbowTimeout);
        currentColor = $(this).val();
        if( currentColor == "pick a color"){
            rainbow();
        }else{
            $(".overlay").css("background-color",currentColor);
        }
    });

    var rainbowCounter = 1; // avoids "pick a color"
    function rainbow(){
        $(".overlay").css("background-color",colorList[rainbowCounter]);
        rainbowCounter++;
        if( rainbowCounter == colorListLength ){
            rainbowCounter = 1; 
        }
        if(currentColor == "pick a colour"){
            rainbowTimeout = setTimeout(function(){
                rainbow();
            },1500);
        }
    }

    rainbow();
});

基于你的小提琴。问题是你的currentColor没有初始化。这样做应该让它发挥作用，

var currentColor = "pick a color";

JS / jQuery $（document）.ready（）与超时或事件监听器冲突？

1 个答案: