jQueryとsetimeout（）を使用して遅延をシミュレートする-jsチュートリアル-php.cn

jQueryとsetimeout（）を使用して遅延をシミュレートする

Joseph Gordon-Levitt

リリース： 2025-02-25 19:28:12

オリジナル

805 人が閲覧しました

ページに表示する前にシミュレーション結果の読み込みなど、イベントの遅延をシミュレートします。この例では、再帰setTimeout()を使用して、事前にチェックされた一連の結果を反復する関数を呼び出して、JavaScript、Flash、ブラウザバージョンなどを確認します。 時間があるときに後でjQueryプラグインに書き込みます。これは簡単です。さまざまな使用状況を満たすために提供するオプションを決定する。

Simulating Delay using jQuery and setTimeout()

demo

jQueryコード（再帰`setTimeout()`）

// 数据和设置
var result = '预检查通过。', // 主结果的 HTML
    delay = 500, // 子结果的延迟
    data = [
    'Javascript ',
    '系统 ',
    '设备 ',
    '浏览器 ',
    'Flash '
    ];

// 从数组索引 0 开始的自执行函数
(function process_els(el_index) {
    var el = data[el_index],
        precheckUl = $('#precheck ul'),
        loadingLi = $('<li class="loading">正在加载...</li>'), // 创建加载项
        sysPreId = "syspre_" + el_index;

    // 显示加载图像
    precheckUl.append(loadingLi.clone().attr("id", sysPreId));

    // 模拟延迟后，将加载图像替换为子检查结果
    setTimeout(function() {
        precheckUl.find('li.loading:first').replaceWith('<li>' + data[el_index] + '检查完成</li>'); // 添加检查完成状态
    }, delay);

    // 模拟延迟，递归调用自身，直到所有数组元素都已处理
    if (el_index + 1 < data.length) {
        setTimeout(function() { process_els(el_index + 1); }, delay);
    } else {
        setTimeout(function() {
            // 在所有子检查都插入后追加最终结果
            precheckUl.after('<p>' + result + '</p>');
        }, (delay * 2));
    }
})(0);

ログイン後にコピー

html

<div id="precheck">
  <h2>系统检查</h2>
  <ul></ul>
</div>

ログイン後にコピー

`setTimeout`アナログ遅延（FAQ）

の使用に関するよくある質問

なぜjavascriptで`setTimeout`を使用するのですか？

setTimeoutは、JavaScriptのメソッドであり、遅延後に実行するためにコードの関数または特定のブロックをスケジュールできます。これは、関数の実行を遅らせる方法です。これは、アニメーションの作成、アラートの遅延、特定のデータを待機する関数など、さまざまな状況で役立ちます。

`setTimeout`どのように機能しますか？

setTimeout機能とミリ秒の遅延の2つのパラメーターを取得することで機能します。 setTimeoutに電話すると、タイマーが開始されます。タイマーが指定された遅延に達すると、関数が実行されます。 setTimeoutは、残りのコードの実行を一時停止しないことに注意する必要があります。後で実行する機能を配置するだけです。