Verwenden von SetTimeout, um einen JQuery -Timer zu erstellen

Dieses Tutorial zeigt einen JQuery -Countdown -Timer, der jede Sekunde von 10 abnimmt. Dies wird erreicht, indem in der Timer -Funktion setTimeout in der Timer -Funktion rekursiv aufgerufen wird. Unten ist der Code.

JQuery Code

jQuery(document).ready(function() {

    let countdown;
    let countdownNumber;

    function countdownInit() {
        countdownNumber = 11;
        countdownTrigger();
    }

    function countdownTrigger() {
        if (countdownNumber > 0) {
            countdownNumber--;
            $('#countdown_text').html(countdownNumber); //Corrected selector and method
            if (countdownNumber > 0) {
                countdown = setTimeout(countdownTrigger, 1000); //Simplified setTimeout call
            }
        }
    }

    function countdownClear() {
        clearTimeout(countdown);
    }

    countdownInit(); //Start the timer on page load

});

HTML -Code

<div id="countdown_text">Placeholding text</div>

Häufig gestellte Fragen zu JQuery -Timern

Dieser Abschnitt befasst sich mit häufigen Fragen zu JQuery -Timern.

F: Wie erstelle ich einen Countdown -Timer mit JQuery?

a: Verwenden Sie setInterval für die wiederholte Ausführung in einem festgelegten Intervall. Hier ist ein prägnantes Beispiel:

let count = 10;
let counter = setInterval(function() {
    count--;
    if (count < 0) {
        clearInterval(counter);
        return;
    }
    $("#timer").text(count + " secs");
}, 1000);

F: Wie kann ich einen JQuery -Timer pausieren?

a: Verwenden Sie clearInterval, um einen Timer zu stoppen, der mit setInterval begonnen hat.

function pauseTimer() {
    clearInterval(counter);
}

F: Wie kann ich einen pausierten JQuery -Timer fortsetzen?

a: JavaScript fährt Timer nicht direkt wieder. Starten Sie es mit setInterval mit dem aktuellen Zählwert neu.

function resumeTimer() {
    counter = setInterval(function() {
        count--;
        if (count < 0) {
            clearInterval(counter);
            return;
        }
        $("#timer").text(count + " secs");
    }, 1000);
}

F: Wie erstelle ich eine verzögerte Funktionsausführung in jQuery?

a: JQuery's .delay() Methode fügt eine Verzögerung hinzu, bevor eine Funktion innerhalb einer Animationskette ausgeführt wird.

$("#myDiv").delay(2000).fadeIn(400);

F: Wie erstelle ich einen sich wiederholenden Timer in jQuery?

a: setInterval ist der Schlüssel für die wiederholte Ausführung einer Funktion.

setInterval(function() {
    alert("Hello");
}, 3000);

Das obige ist der detaillierte Inhalt vonVerwenden von SetTimeout, um einen JQuery -Timer zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!