js在for循環，樣式和setInterval無法正常工作？

爲什麼在調用fadeIn（）onLoad時，瀏覽器會立即運行循環。換句話說，setInterval或Opacityto（）都有問題。js在for循環，樣式和setInterval無法正常工作？

function Opacityto(elem,v){ 
    elem.style.opacity = v/100; 
    elem.style.MozOpacity = v/100; 
    elem.style.KhtmlOpacity = v/100; 
    elem.style.filter=" alpha(opacity ="+v+")";} 

function fadeIn(){ 
elem=document.getElementById('nav'); 
for (i=0;i==100;i++){ 
    setInterval(Opacityto(elem,i),100);} 
}

我想有人會告訴我這可以做到最簡單的jQuery，但我有興趣用javascript來做。

謝謝！HelP！

來源

2011-11-03 rob-gordon

爲什麼不看一下在GitHub jQuery代碼，看看他們是怎麼做的？ – AlienWebguy

@AlienWebguy多數民衆贊成在一個好主意，我會檢查出來。謝謝 –

Eval是邪惡的，兄弟。將實際函數傳遞給setInterval而不是字符串。 – hugomg

你有幾個問題你fadeIn()功能：

A.您的循環條件是i==100，這是不是第一次迭代真實，因此for循環將永遠不會被執行主體（ i++將不會發生）。也許你的意思是i<=100或i<100（取決於你想循環運行101次還是100次）？

B.你setInterval代碼有語法錯誤編輯：，因爲你已經更新了你的問題，以刪除引號 - setInterval預計字符串或函數引用/表達。所以你需要傳遞一個函數的名字而不用括號和參數，或者像函數表達式那樣，你可以在下面的代碼中看到匿名函數表達式。 ~~以您嘗試構建傳遞它的字符串的方式。你有這樣的：~~

"Opacityto("+elem,i+")"

，但你需要這樣的：

"Opacityto(elem," + i + ")"

~~後者產生一個字符串，取決於i，貌似"Opacityto(elem,0)"，即，它產生的JavaScript的有效一塊將調用Opacityto()函數。~~

C.你可能想setTimeout()而不是setInterval()，因爲setInterval()將運行Opacityto()功能每100ms 永遠，而setTimeout()將延時100ms後運行Opacityto()一次。鑑於你是在一個循環中調用它，我相信你不會真的想要呼叫setInterval() 100次，導致你的功能Opacityto()每100ms運行100次永遠。 D.即使解決了上述所有問題，你的基本結構也不會做你想要的。當您撥打setInterval()或setTimeout()時，它不會暫停執行當前的代碼塊。因此，整個for循環將運行並立即創建所有間隔/超時，然後當100毫秒到達時，它們將全部或多或少一次被觸發。如果你的意圖是逐漸改變與每一個變化發生的每100ms，那麼你需要下面的代碼（或在其上的一些變化）的不透明度：

function fadeIn(i){ 
    // if called with no i parameter value initialise i 
    if (typeof i === "undefined") { 
     i = -1; 
    } 

    if (++i <= 100) { 
     Opacityto(document.getElementById('nav'), i); 
     setTimeout(function() { fadeIn(i); }, 100); 
    } 
} 

// kick it off: 
fadeIn();

什麼上面所做的是定義fadeIn()，然後調用它傳遞任何參數。該函數檢查i是否未定義，如果是，則將其設置爲-1（如果您不通過參數調用它，會發生什麼情況）。然後它會增加i並檢查結果是否小於或等於100，如果是，則調用Opacityto()傳遞對元素的引用和i。然後它使用setTimeout()在100ms時間內呼叫本身，通過當前i通過。因爲setTimeout()在if測試中，所以一旦i變得足夠大，該功能停止設置超時，並且整個過程結束。

有你可以實現這幾個其他的方式，但是這只是發生了，因爲我開始打字第一...

來源

2011-11-03 04:10:15 nnnnnn

謝謝，您的回覆中有太多信息，我需要仔細研究一段時間。我仍然是一個新手編碼器，循環結構是神祕的。 setInteval與setTimeout，誰知道！可能很多人。感謝傳遞知識。保重 –

不客氣。是的，'setInterval（）'和'setTimeout（）'起初讓很多人興奮，特別是當涉及到循環時。對於長答案抱歉，但我認爲我能縮短它的唯一方法是刪除所有解釋並只給我建議的新代碼 - 說到這一點，我希望我的版本'fadeIn（）'能夠做到這一點爲你。 – nnnnnn

它做了，再次感謝（如果我有_reputation_我會投票你的答案！） –

我的猜測是存在的setInterval內一個討厭逗號，搞亂參數列表：

"Opacityto("+elem,i+")" 
       ^^^ 
       here

你可以嘗試引用逗號

+ "," +

但EVAL是邪惡所以沒去做。的好辦法是通過一個真正的回調函數：

function make_opacity_setter(elem, i){ 
    return function(){ 
     OpacityTo(elem, i); 
    }; 
} 

... 

setTimeout(make_opacity_setter(elem, i), 1000);

請注意，需要對中間功能製作功能，以避免倒閉之間的for循環討厭的互動。

順便說一句，當你做

setInterval(func(), 1000)

你叫FUNC一次自己，然後通過其返回值給setInterval。由於setInterval接收垃圾值而不是回調，因此無法按您的要求工作。

來源

2011-11-03 04:04:40 hugomg

js在for循環，樣式和setInterval無法正常工作？

回答

相關問題