Javascript遞歸超時調用

這是我嘗試編寫一個動態的onmouseout事件，它在鼠標離開div時緩慢地改變不透明度。由於某些原因，遞歸和超時似乎不是工作屬性，並且不透明度的改變立即完成。Javascript遞歸超時調用

問題：是否有任何原因setTimeout()不適用於遞歸？有沒有更好的方法來解決這個問題？

function hide(id) 
{ 
    if (gOpacity > .4) 
    { 
     gOpacity -= .1; 
     document.getElementById(id).style.opacity = gOpacity; 
     setTimeout(hide(id),1000) 
    } 
    else 
    { 
     gOpacity = 1.0 
    } 
}

來源

2013-06-02 IntriquedMan

的可能重複[爲什麼當我使用的setTimeout方法立即執行？]（http://stackoverflow.com/questions/7137401/why-is-the-method-executed-immediately-when-i-use-settimeout） – Quentin

下面的答案顯示了這個問題，但爲了增加討論，'setTimeout'可以很好地遞歸地工作。 setTimeout接受一個函數作爲它的第一個參數，而相反，你傳入一個函數調用的結果。 'hide（id）'立即調用該函數。刪除（），你很好。 – Alan

這個功能在很長一段時間內基本上是一個「淡入淡出」。是否有你沒有使用CSS轉換的原因？在現代瀏覽器上，CSS動畫是硬件加速的。 – Alan

更改您的setTimeout調用

setTimeout(function() { hide(id); } ,1000)

因此，將1秒後執行，並沒有立即

來源

2013-06-02 20:38:20 BrunoLM

作品，這是美麗的。謝謝陌生人。 – IntriquedMan

你打我16秒:) – NicoSantangelo

有沒有辦法取消這樣的事件，如果用戶在很短的時間內多次進入和退出div它會取消之前的事件呼叫？ – IntriquedMan

你試過嗎？

function hide(id) 
{ 
    if (gOpacity > .4) 
    { 
     gOpacity -= .1; 
     document.getElementById(id).style.opacity = gOpacity; 
     setTimeout(function() { 
      hide(id); 
     },1000) 
    } 
    else 
    { 
     gOpacity = 1.0 
    }

}

來源

2013-06-02 20:38:36 NicoSantangelo

我thinck，當你鍵入：

setTimeout(hide(id),1000);

你真正的意思是：

setTimeout(hide.bind(this,id),1000);

becasue在第一種情況下，該函數將被調用即時setTimeout是調用 - 它是setTimeout-的一個參數。
在第二種情況下，這將是一個綁定函數。所以是這個和id是評估，但該功能不會被調用，直到1000毫秒過去。

（這只是運行速度更快/鍵入方式創建功能更快）。

來源

2013-06-02 20:44:33 GameAlchemist

包裹所有你的代碼遞歸函數由setTimeout的

function hide(id) 
 
{ 
 
    setTimeout(function() { 
 
     if (gOpacity > .4) 
 
     { 
 
      gOpacity -= .1; 
 
      document.getElementById(id).style.opacity = gOpacity; 
 
      hide(id); 
 
     } 
 
     else 
 
     { 
 
      gOpacity = 1.0 
 
     } 
 
    },1000) 
 
}

來源

2014-12-21 09:42:40 WantToDo

儘管你的答案似乎是正確的，但請首先閱讀其他答案以獲得類似的答案（就像本例中那樣）。其中一個答案也已被接受（旁邊有綠色的複選標記）。 –

Javascript遞歸超時調用

回答

相關問題