Heim > Web-Frontend > js-Tutorial > Simulation der Verzögerung mit JQuery und SetTimeout ()

Simulation der Verzögerung mit JQuery und SetTimeout ()

Joseph Gordon-Levitt
Freigeben: 2025-02-25 19:28:12
Original
805 Leute haben es durchsucht

Simulation der Ereignisverzögerung, z. B. das Laden von Simulationsergebnissen, bevor sie auf der Seite angezeigt werden. In diesem Beispiel wird rekursiv setTimeout() eine Funktion aufgerufen, die über ein Array von vorab überprüften Ergebnissen iteriert, um JavaScript, Flash, Browserversionen und mehr zu überprüfen. Ich werde es später in ein JQuery -Plugin schreiben, wenn ich Zeit habe, was einfach ist. Bestimmen Sie einfach, welche Optionen für die Begegnung mit unterschiedlichen Verwendungssituationen .

Simulating Delay using jQuery and setTimeout()

Demo

jQuery Code (rekursiv 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);
Nach dem Login kopieren

html

<div id="precheck">
  <h2>系统检查</h2>
  <ul></ul>
</div>
Nach dem Login kopieren

häufig gestellte Fragen zur Verwendung setTimeout analoge Verzögerung (FAQ)

Warum setTimeout in JavaScript verwenden?

setTimeout ist eine Methode in JavaScript, mit der Sie eine Funktion oder einen bestimmten Codeblock für Verzögerungen planen können. Dies ist eine Möglichkeit, die Ausführung einer Funktion zu verzögern. Dies ist in verschiedenen Situationen nützlich, z. B. das Erstellen von Animationen, die Verzögerung von Warnungen oder das Warten auf bestimmte Daten.

setTimeout Wie funktioniert es?

setTimeout funktioniert mit zwei Parametern: eine Funktion und eine Verzögerung in Millisekunden. Wenn Sie setTimeout anrufen, startet es einen Timer. Sobald der Timer die angegebene Verzögerung erreicht hat, wird die Funktion ausgeführt. Es ist zu beachten, dass setTimeout die Ausführung des verbleibenden Code nicht pausieren wird. Es ordnet nur die Funktion zu, die später ausgeführt wird.

Kann ich setTimeout stornieren?

Ja, Sie können die Funktion clearTimeout verwenden, um setTimeout abzubrechen. Wenn Sie setTimeout nennen, gibt es eine eindeutige ID zurück. Sie können diese ID an clearTimeout übergeben, um den Timer zu stoppen und zu verhindern, dass die Funktion ausgeführt wird.

Wie erstelle ich eine Verzögerung mit setTimeout in jQuery?

Während JQuery eine eigene delay -Methode hat, können Sie im Jquery -Kontext setTimeout weiterhin verwenden. Sie werden es so verwenden, wie Sie es in einfachem JavaScript tun würden, indem Sie Funktionen und Verzögerungen an setTimeout übergeben.

Was ist der Unterschied zwischen

setTimeout und jQuery delay Methode?

Während sowohl die setTimeout als auch die delay -Methoden von JQuery zum Erzeugen von Verzögerungen verwendet werden können, funktionieren sie etwas anders. setTimeout wird für JavaScript -Funktionen verwendet, während delay für die JQuery -Animation verwendet wird. delay speziell für die Verwendung mit JQuery's Effect -Warteschlangen ausgelegt.

Kann ich async/await in setTimeout verwenden?

Ja, Sie können Verzögerungen in einer asynchronen Funktion mit async/await und setTimeout erstellen. Dazu müssen Sie das setTimeout in ein Versprechen einwickeln.

Warum funktioniert mein setTimeout nicht?

Ihr setTimeout funktioniert möglicherweise aus mehreren Gründen nicht. Möglicherweise haben Sie einen Syntaxfehler gemacht oder versuchen, eine noch nicht definierte Variable zu verwenden. Die Verzögerung kann auch zu kurz sein, um zu bemerken, oder die Funktion, die Sie ausführen möchten, kann einen Fehler verursachen.

Kann ich setTimeout in einer Schleife verwenden?

Ja, Sie können setTimeout in einer Schleife verwenden. Da jedoch setTimeout nicht blockiert ist, werden alle Auszeiten gleichzeitig gestartet. Wenn Sie eine Reihe von Verzögerungen erstellen möchten, müssen Sie Verzögerungen für jede Iteration der Schleife hinzufügen.

Wie testet ich eine Funktion mit setTimeout?

Testfunktionen mit setTimeout können aufgrund der Verzögerung schwierig sein. Eine Möglichkeit besteht darin, ein Test -Framework zu verwenden, das asynchrone Tests unterstützt. Eine andere Möglichkeit besteht darin, setTimeout so zu simulieren, dass Sie die Ausführungszeit der Funktion steuern können.

Gibt es eine Grenze für die Verzögerung, die ich mit setTimeout festlegen kann?

Die maximale Verzögerung, die Sie mit setTimeout einstellen können, beträgt 2147483647 Millisekunden, etwa 24,8 Tage. Wenn Sie versuchen, eine längere Verzögerung als diese festzulegen, wird sie auf 1 reduziert.

Der Code wurde geändert, und die Eingabeaufforderungen an die Eingabeaufforderungen und die Eingabestatusaufforderungen wurden hinzugefügt, um das Verständnis klarer und einfacher zu machen. Der Bildpfad bleibt gleich.

Das obige ist der detaillierte Inhalt vonSimulation der Verzögerung mit JQuery und SetTimeout (). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage