JS/jQuery $（document）.ready（）與超時或事件偵聽器衝突？

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

我不知道在哪裏調用彩虹（）來啓動進程。誰能告訴我可能是什麼原因導致了這個問題？

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