Simulant un retard à l'aide de jQuery et setTimeout ()

Simuler le retard des événements, tels que le chargement des résultats de simulation avant de les afficher sur la page. Cet exemple utilise Recursive setTimeout() pour appeler une fonction qui itère sur un tableau de résultats pré-vérifiés pour vérifier JavaScript, Flash, les versions du navigateur, etc. Je l'écrirai dans un plugin jQuery plus tard lorsque j'aurai le temps, ce qui est facile, déterminez simplement les options à fournir pour respecter différentes situations d'utilisation .

démo

JQuery Code (récursif 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>

Les questions fréquemment posées sur l'utilisation de setTimeout retard analogique (FAQ)

Pourquoi utiliser setTimeout dans JavaScript?

setTimeout est une méthode de JavaScript qui vous permet de planifier une fonction ou un bloc de code spécifique à exécuter après retard. C'est un moyen de retarder l'exécution d'une fonction. Ceci est utile dans diverses situations, telles que la création d'animations, le retard des alertes ou la fonction d'attendre certaines données.

setTimeout Comment ça marche?

setTimeout Fonctionne en prenant deux paramètres: une fonction et un retard en millisecondes. Lorsque vous appelez setTimeout, il démarre une minuterie. Une fois que le temporisateur atteint le retard spécifié, il exécute la fonction. Il convient de noter que setTimeout ne fera pas en pause l'exécution du code restant. Il organise simplement la fonction à exécuter plus tard.

Puis-je annuler setTimeout?

Oui, vous pouvez utiliser la fonction clearTimeout pour annuler setTimeout. Lorsque vous appelez setTimeout, il renvoie un identifiant unique. Vous pouvez transmettre cet ID à clearTimeout pour arrêter la minuterie et empêcher l'exécution de la fonction.

Comment créer un retard en utilisant setTimeout dans jQuery?

Bien que jQuery ait sa propre méthode delay, vous pouvez toujours utiliser setTimeout dans le contexte jQuery. Vous l'utiliserez comme vous le feriez en JavaScript simple en passant des fonctions et des retards à setTimeout.

Quelle est la différence entre

setTimeout et la méthode delay de jQuery?

Bien que les méthodes setTimeout et de jQuery delay puissent être utilisées pour créer des retards, ils fonctionnent légèrement différemment. setTimeout est utilisé pour les fonctions JavaScript, tandis que delay est utilisé pour l'animation jQuery. delay spécialement conçu pour être utilisé avec les files d'attente d'effet de jQuery.

Puis-je utiliser async/await dans setTimeout?

Oui, vous pouvez créer des retards dans une fonction asynchrone en utilisant async/await et setTimeout. Pour ce faire, vous devez envelopper le setTimeout dans une promesse.

Pourquoi mon setTimeout ne fonctionne-t-il pas?

votre setTimeout peut ne pas fonctionner pour plusieurs raisons. Vous avez peut-être fait une erreur de syntaxe, ou vous pouvez essayer d'utiliser une variable qui n'a pas encore été définie. Le retard peut également être trop court à remarquer, ou la fonction que vous essayez d'exécuter peut entraîner une erreur.

Puis-je utiliser setTimeout dans une boucle?

Oui, vous pouvez utiliser setTimeout dans une boucle. Cependant, puisque setTimeout n'est pas bloquant, tous les délais d'expiration seront démarrés simultanément. Si vous souhaitez créer une série de retards, vous devez ajouter des retards pour chaque itération de la boucle.

Comment tester une fonction en utilisant setTimeout?

Les fonctions de test utilisant setTimeout peuvent être délicates en raison du retard. Une façon consiste à utiliser un cadre de test qui prend en charge les tests asynchrones. Une autre façon consiste à simuler setTimeout afin que vous puissiez contrôler le temps d'exécution de la fonction.

Y a-t-il une limite au retard que je peux définir en utilisant setTimeout?

Le retard maximum que vous pouvez définir en utilisant setTimeout est 2147483647 millisecondes, environ 24,8 jours. Si vous essayez de régler un délai plus long que cela, il sera réduit à 1.

Le code a été modifié, et des invites de chargement et des invites d'état d'achèvement ont été ajoutées pour le rendre plus clair et plus facile à comprendre. Le chemin d'image reste le même.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!