ホームページ > ウェブフロントエンド > jsチュートリアル > setimeoutを使用してjqueryタイマーを作成します

setimeoutを使用してjqueryタイマーを作成します

Joseph Gordon-Levitt
リリース: 2025-03-06 01:11:10
オリジナル
300 人が閲覧しました

Using SetTimeout to Make a jQuery Timer

このチュートリアルは、毎秒10から減少するjQueryカウントダウンタイマーを示しています。 これは、タイマー関数内で再帰的に呼び出すことによって達成されます。以下はコードです。setTimeout

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コード

<div id="countdown_text">Placeholding text</div>
ログイン後にコピー

jQueryタイマーについてよく尋ねる質問 このセクションでは、jQueryタイマーに関する一般的な質問について説明します

Q:jQueryでカウントダウンタイマーを構築するにはどうすればよいですか?

a:設定された間隔で繰り返し実行するには、

を使用します。 簡潔な例は次のとおりです

Q:jQueryタイマーを一時停止するにはどうすればよいですか?

a:setInterval

let count = 10;
let counter = setInterval(function() {
    count--;
    if (count < 0) {
        clearInterval(counter);
        return;
    }
    $("#timer").text(count + " secs");
}, 1000);
ログイン後にコピー

Q:一時停止したjQueryタイマーを再開する方法?

A:JavaScriptはタイマーを直接再開しません。 現在のカウント値を使用して

で再起動します。clearInterval setInterval

function pauseTimer() {
    clearInterval(counter);
}
ログイン後にコピー
Q:jQueryで遅延機能実行を作成する方法は?

a:jqueryのメソッドは、アニメーションチェーン内で関数を実行する前に遅延を追加します。

Q:jQueryで繰り返しタイマーを作成する方法は? setIntervala:

は、関数を繰り返し実行するための鍵です。
function resumeTimer() {
    counter = setInterval(function() {
        count--;
        if (count < 0) {
            clearInterval(counter);
            return;
        }
        $("#timer").text(count + " secs");
    }, 1000);
}
ログイン後にコピー

以上がsetimeoutを使用してjqueryタイマーを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート