jQuery - Как я могу продолжить анимацию, когда мышь наводит курсор на элемент?

Question

Мне нужен способ для выполнения какой-то функции whileonmouseover, чтобы продолжить анимацию, когда курсор мыши находится над элементом ...

Например, с учетом этой функции:

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

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

Предупреждение будет срабатывать один раз, когда мышь наводит курсор на кнопку #. Мне нужен способ продолжать этот предупредительный огонь, пока мышь остается над кнопкой #

Я пытался выполнить какую-то рекурсию функции, чтобы продолжить оповещение, пока не будет установлен триггер, вызывающий его остановку:

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

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

        alert(1);
        doAlert();
    }

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

Но это не удалось. Кажется, что функция полностью игнорирует присвоение «doLoop = false» в «hover off».

Есть ли способ сделать это?

Answer 1

Я бы рекомендовал установить интервал, а не повторять, потому что, предполагая, что окончательное решение не просто предупреждает, но делает что-то неблокирующее, повторение во время зависания может быстро вызвать зависание памяти и не отвечает.

Что-то вроде:

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

Answer 2

Я бы предложил переместить следующую часть за пределы функции $ (document) .ready ():

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