suchen

Heim >Web-Frontend >js-Tutorial >Wie verwende ich das Ready-Ereignis in der Verwendung einer Ready-Ereignisinstanz?

Wie verwende ich das Ready-Ereignis in der Verwendung einer Ready-Ereignisinstanz?

伊谢尔伦
伊谢尔伦Original
2017-06-16 15:44:561585Durchsuche

jQuery.holdReady()-Methodenverwendungsbeispiel

Der Aufruf dieser Methode kann das ReadyEreignis von jQuery verzögern, was bedeutet, dass das Dokument auch dann geladen wird, wenn es geladen wurde wird nicht Die Methode readyEreignisbehandlung wird ausgeführt.
Die Methode jQuery.holdReady() kann mehrmals aufgerufen werden, um das Bereitschaftsereignis von jQuery zu verzögern. Wenn bestimmte Bedingungen erfüllt sind, kann die Verzögerung nacheinander aufgehoben werden, indem die Parameter dieser Methode auf „false“ gesetzt werden. Diese Methode wird im Allgemeinen zum dynamischen Laden von Skripten verwendet. Sobald das Skript geladen ist, können Sie die Parameter dieser Methode auf „false“ setzen, um die Verzögerung beim jQuery.ready()-Ereignis aufzuheben.

Wenn wir das Ready-Ereignis in JQuery verwenden, wird es normalerweise nach dem Laden der Seite ausgelöst, um zu verhindern, dass das DOM-Element nicht abgerufen wird, weil die Seite nicht geladen wurde. Wie im folgenden Beispiel: 

<!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>

Wie in der obigen Situation wird das Ready-Ereignis automatisch ausgelöst, wenn die DOM-Elemente auf der Seite geladen werden. Im folgenden Beispiel muss beispielsweise zuerst „ready“ und dann „timeout“ ausgegeben werden. Manchmal müssen wir jedoch warten, bis andere Elemente geladen sind, bevor wir das Bereitschaftsereignis auslösen, d. h. zuerst das Ausgabe-Timeout und dann die Ausgabe „Bereit“. 

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

2. Methoden zur Verzögerung der Bereitschaftsausführung

Es gibt mehrere Methoden zur Verzögerung der Bereitschaftsausführung.

2.1 Ändern Sie die Position der Ready-Methode

JS wird im Allgemeinen in der oberen und unteren Reihenfolge ausgeführt. Basierend auf dieser Einstellung können wir die Ausführung von Ready verzögern. 

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

Trigger bereit, nachdem auf das Submit-Element geklickt wurde.

2.2 Verwenden Sie $.holdReady()

Obwohl der obige Code nach dem Klicken die Bereitschaftsmethode auslösen kann, ist es nicht gut, so zu schreiben. Was ist, wenn viel Inhalt bereit ist? ? Die Logik ist ziemlich verwirrend. Tatsächlich bietet jquery bereits eine Möglichkeit, die Ausführung der Ready-Methode zu verzögern: $.holdReady(). Verwenden Sie immer noch das Beispiel in Abschnitt 1: 

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

Mit $.holdReady() kann zuerst ein Timeout ausgegeben werden, dann „ready“ ausgegeben und dann „ready“ ausgeführt werden, nachdem setTimeout ausgeführt wurde.

$.holdReady(true) und $.holdReady(false) erscheinen beide paarweise. Wenn ready vor der Ausführung auf den Abschluss mehrerer Anforderungen warten muss, können Sie Folgendes schreiben: 

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;);
})

Der obige Code wird sofort ausgeführt, nachdem alle drei setTimeouts ausgeführt wurden.

3. Implementierung von $.holdReady im Quellcode

Tatsächlich bearbeitet $.holdReady() auch den Wert von $.readyWait im Quellcode. macht $.readyWait Der Wert ist +1, $.holdReady(false) macht den Wert von $.readyWait -1 und bereit wird ausgelöst, wenn der Wert von $.readyWait 1 ist. Der Standardwert von $.readyWait ist 1, sodass „Ready“ standardmäßig direkt ausgelöst wird. 

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" );
        }
    }
});

Wie aus dem Funktionskörper von $.holdReady ersichtlich ist, dient $.holdReady(true) dazu, $.readyWait++ auszuführen, während $.holdReady(false) dazu dient, $.ready(true) auszuführen );

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

Das obige ist der detaillierte Inhalt vonWie verwende ich das Ready-Ereignis in der Verwendung einer Ready-Ereignisinstanz?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
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
Vorheriger Artikel：Detaillierte Erläuterung der Anwendungsbeispiele von jQuery.holdReady(hold)Nächster Artikel：Detaillierte Erläuterung der Anwendungsbeispiele von jQuery.holdReady(hold)

In Verbindung stehende Artikel

Mehr sehen