jQuery - Làm cách nào để tiếp tục hoạt ảnh trong khi chuột di chuột qua phần tử?

Question

Tôi cần một cách để thực hiện một số loại 'whileonmouseover' chức năng để tiếp tục một hình ảnh động trong khi thuyết minh chuột lên một yếu tố ...

Ví dụ, với chức năng này:

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

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

Cảnh báo sẽ bắn một lần khi chuột di chuột qua nút #. Tôi cần một cách để tiếp tục có cảnh báo cháy đó trong khi chuột vẫn còn trên # nút ...

Tôi đã thử thực hiện một số loại đệ quy chức năng để tiếp tục cảnh báo cho đến khi kích hoạt được đặt khiến nó dừng lại:

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

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

     alert(1); 
     doAlert(); 
    } 

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

Nhưng điều đó không thành công. Có vẻ như hàm hoàn toàn bỏ qua nhiệm vụ 'doLoop = false' trong 'hover off'.

Bất kỳ cách nào để thực hiện việc này?

Answer 1

tôi sẽ đề nghị để di chuyển các phần sau bên ngoài phạm vi của $ (document) .ready() chức năng:

var doLoop = true; 

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

    alert(1); 
    doAlert(); 
} 

Vì vậy, thử mã này thay vì:

var doLoop = true; 

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

    alert(1); 
    doAlert(); 
} 

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

Answer 2

Tôi muốn khuyên bạn nên thiết lập một khoảng thời gian thay vì đệ quy bởi vì, giả sử giải pháp cuối cùng không chỉ là cảnh báo nhưng đang làm một cái gì đó không chặn, đệ quy trong khi lơ lửng có thể nhanh chóng gây ra hogging bộ nhớ và không phản hồi.

Cái gì như:

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