jQuery - 如何在鼠標懸停在某個元素上時繼續動畫？

Question

我需要一種方法來執行某種「whileonmouseover」功能繼續動畫當鼠標懸停在一個元素...

例如，鑑於這一功能：

$(document).ready(function() 
{ 
    function doAlert() 
    { 
     alert(1); 
    } 

    $('#button').hover(function() 
    { 
     doAlert(); 
    }); 
}); 

警報將當鼠標懸停在#button上時，一次發射。我需要一種方法來繼續讓鼠標仍然在#button時發出警報...

我試過做某種函數遞歸來繼續警報，直到觸發器設置導致它停止：

$(document).ready(function() 
{ 
    var doLoop = true; 

    function doAlert() 
    { 
     if (!doLoop) return; 

     alert(1); 
     doAlert(); 
    } 

    $('#button').hover(function() 
    { 
     doAlert(); 
    }, function() 
    { 
     doLoop = false; 
    }); 
}); 

但是失敗了。似乎函數完全忽略了'懸停'中的'doLoop = false'賦值。

任何方式來完成此？

Answer 1

我會建議將以下部分的$（document）的範圍之外。就緒（）函數：

var doLoop = true; 

function doAlert() 
{ 
    if (!doLoop) return; 

    alert(1); 
    doAlert(); 
} 

那麼試試這個代碼，而不是：

var doLoop = true; 

function doAlert() 
{ 
    if (!doLoop) return; 

    alert(1); 
    doAlert(); 
} 

$(document).ready(function() 
{ 
    $('#button').hover(function() 
    { 
     doAlert(); 
    }, function() 
    { 
     doLoop = false; 
    }); 
}); 

Answer 2

我會建議設置一個時間間隔而不是遞歸，因爲假設最終的解決方案不僅僅是提醒，而且還在做一些非阻塞的事情，在懸停時遞歸會快速導致內存耗費和無響應。

喜歡的東西：

var hoverInterval; 

function doStuff() { 
    // Set button's background to a random color 
    $("#button").css("background", "#" + Math.floor(Math.random() * 16777215).toString(16)); 
} 

$(function() { 
    $("#button").hover(
     function() { 
      // call doStuff every 100 milliseconds 
      hoverInterval = setInterval(doStuff, 100); 
     }, 
     function() { 
      // stop calling doStuff 
      clearInterval(hoverInterval); 
     } 
    ); 
});