Comment utiliser l'événement ready dans jquery Utilisation de l'instance d'événement Ready ?-js tutoriel-php.cn

Comment utiliser l'événement ready dans jquery Utilisation de l'instance d'événement Ready ?

伊谢尔伦

Libérer： 2017-06-16 15:44:56

original

1600 Les gens l'ont consulté

Exemple d'utilisation de la méthode jQuery.holdReady()

L'appel de cette méthode peut retarder l'événement readyde jQuery, ce qui signifie que même si le document a été chargé, il ne sera pas La méthode readyevent handle sera exécutée.
La méthode jQuery.holdReady() peut être appelée plusieurs fois pour retarder l'événement ready de jQuery. Lorsque certaines conditions sont remplies, le délai peut être libéré un par un en définissant les paramètres de cette méthode sur false. Cette méthode est généralement utilisée pour le chargement dynamique de scripts. Une fois le script chargé, vous pouvez ensuite définir les paramètres de cette méthode sur false pour libérer le délai sur l'événement jQuery.ready().

Habituellement, lorsque nous utilisons l'événement ready dans jquery, il est déclenché après le chargement de la page pour empêcher l'élément DOM de ne pas être obtenu car la page n'a pas été chargée. Comme dans l'exemple suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>deom</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.2.js"></script>
    <script type="text/javascript">
        $(function(){            // 页面加载完成后再获取content元素
            console.log($(&#39;#content&#39;).html());
        })        // 获取不到元素
        console.log($(&#39;#main&#39;).html());    
     </script>
     </head>
     <body>
    <div id="content">this is content</div>
    <div id="main">this is main</div>
    </body>
    </html>

Copier après la connexion

Comme la situation ci-dessus, lorsque les éléments DOM de la page sont chargés, l'événement ready sera automatiquement déclenché. Par exemple, dans l'exemple suivant, ready doit être affiché en premier, puis timeout. Cependant, nous devons parfois attendre que d'autres éléments soient chargés avant de déclencher l'événement ready, c'est-à-dire que le délai de sortie soit d'abord écoulé, puis que la sortie soit prête. Que devons-nous faire dans ce cas ?

setTimeout(function(){    
console.log("timeout");
}, 500)
$(function(){    
console.log("ready");
})

Copier après la connexion

2. Méthodes pour retarder l'exécution prête

Il existe plusieurs méthodes pour retarder l'exécution prête.

2.1 Modifier la position de la méthode ready

JS est généralement exécuté dans l'ordre haut et bas Nous pouvons retarder l'exécution de ready en fonction de ce paramètre.

$(&#39;#submit&#39;).click(function(){   
 // 执行ready    
 $(function(){        
console.log("ready");    
     })
})

Copier après la connexion

Déclencheur prêt après avoir cliqué sur l'élément de soumission.

2.2 Utilisez $.holdReady()

Bien que le code ci-dessus puisse déclencher la méthode ready après un clic, il n'est pas bon d'écrire comme ça. Et s'il y a beaucoup de contenu dans ready. ? La logique est plutôt confuse. En fait, jquery fournit déjà un moyen de retarder l'exécution de la méthode ready : $.holdReady(). Toujours en utilisant l'exemple de la section 1 :

setTimeout(function(){
    console.log("timeout");
    // 释放ready方法，开始执行
    $.holdReady(false);
}, 500)
// 把ready方法hold住，暂时不让ready执行
$.holdReady(true);
$(function(){
    console.log("ready");
})

Copier après la connexion

L'utilisation de $.holdReady() peut d'abord afficher le délai d'attente, puis afficher prêt, puis exécuter prêt après l'exécution de setTimeout.

$.holdReady(true) et $.holdReady(false) apparaissent tous deux par paires. Si ready doit attendre que plusieurs requêtes soient terminées avant de s'exécuter, vous pouvez écrire comme ceci :

setTimeout(function(){
    console.log(&#39;timeout0&#39;);
    $.holdReady(false);
}, 500);
setTimeout(function(){
    console.log(&#39;timeout1&#39;);
    $.holdReady(false);
}, 500);
setTimeout(function(){
    console.log(&#39;timeout2&#39;);
    $.holdReady(false);
}, 500);
$.holdReady(true);
$.holdReady(true);
$.holdReady(true);
$(function(){
    console.log(&#39;ready&#39;);
})

Copier après la connexion

Le code ci-dessus s'exécute prêt une fois que les trois setTimeouts ont été exécutés.

3. Implémentation de $.holdReady dans le code source

En fait, $.holdReady() exploite également la valeur de $.readyWait dans le code source $.holdReady(true) rend $.readyWait La valeur est +1, $.holdReady(false) rend la valeur de $.readyWait -1 et prêt est déclenché lorsque la valeur de $.readyWait est 1. La valeur par défaut de $.readyWait est 1, donc ready sera déclenché directement par défaut.

jQuery.extend({
    // 表示ready方法是否正在执行，若正在执行，则将isReady设置为true
    isReady: false,
    // ready方法执行前需要等待的次数
    readyWait: 1,
    // hold或者释放ready方法，若参数为true则readyWait++，否则执行ready，传入参数为true
    holdReady: function( hold ) {
        if ( hold ) {
            jQuery.readyWait++;
        } else {
            jQuery.ready( true );
        }
    },
    // 当DOM加载完毕时开始执行ready
    ready: function( wait ) {
        // 若传入的参数为true，则--readyWait；否则判断isReady，即ready是否正在执行  
        if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
            return;
        }
        // Remember that the DOM is ready
        jQuery.isReady = true;
        // 若readyWait-1后还是大于0，则返回，不执行ready。
        if ( wait !== true && --jQuery.readyWait > 0 ) {
            return;
        }
        // If there are functions bound, to execute
        readyList.resolveWith( document, [ jQuery ] );
        // 触发ready方法，然后解除绑定的ready方法。
        if ( jQuery.fn.triggerHandler ) {
            jQuery( document ).triggerHandler( "ready" );
            jQuery( document ).off( "ready" );
        }
    }
});

Copier après la connexion

Comme le montre le corps de la fonction de $.holdReady, $.holdReady(true) doit exécuter $.readyWait++, tandis que $.holdReady(false) doit exécuter $.ready(true );

holdReady: function( hold ) {
    if ( hold ) {
        jQuery.readyWait++;
    } else {
        jQuery.ready( true );
    }
}

Copier après la connexion

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!