jQuery - Wie kann ich eine Animation fortsetzen, während die Maus über einem Element schwebt?

Question

Ich brauche eine Möglichkeit, eine Art "whileonmouseover"-Funktion auszuführen, um eine Animation fortzusetzen, während die Maus über ein Element fährt...

Zum Beispiel bei dieser Funktion:

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

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

Der Alarm wird einmal ausgelöst, wenn die Maus über #button schwebt. Ich brauche einen Weg, um fortzusetzen, dass die Warnung Feuer, während die Maus über #button bleibt...

Ich habe versucht, eine Art von Funktionsrekursion zu tun, um die Warnung fortzusetzen, bis ein Auslöser gesetzt wird, der sie stoppt:

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

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

        alert(1);
        doAlert();
    }

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

Aber das hat nicht geklappt. Anscheinend ignoriert die Funktion die Zuweisung "doLoop = false" in "hover off" vollständig.

Gibt es eine Möglichkeit, dies zu erreichen?

Answer 1

Ich würde empfehlen, ein Intervall anstelle von recursing, weil, vorausgesetzt, die endgültige Lösung ist nicht nur alarmieren, sondern ist etwas nicht-blockierende tun, recursing während schweben kann schnell dazu führen, dass Speicher Hogging und Unresponsiveness.

Etwa so:

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

Ich würde vorschlagen, den folgenden Teil außerhalb des Bereichs der Funktion $(document).ready() zu verschieben:

var doLoop = true;

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

    alert(1);
    doAlert();
}

Versuchen Sie stattdessen diesen Code:

var doLoop = true;

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

    alert(1);
    doAlert();
}

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