執行異步HTTP請求 - 這兩者之間的區別是什么？

Question

這是用於在網頁上加載Disqus評論的（默認/官方）JavaScript代碼：

（代碼＃1）

<script type="text/javascript">
    var disqus_shortname = 'paulund';

    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>

在我看來，代碼異步地執行HTTP請求; 但那不是重點。

問題是，我需要對代碼進行一些更改，以便僅在用戶向下滾動到評論部分時加載注釋，如延遲加載。 而且我有兩種工作方法可以做到這一點。

（代碼＃2）

jQuery(document).ready(function($){
    $('#comments').waypoint(function () {

        var disqus_shortname = 'paulund';

        $(function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();

    }, { offset: '100%', triggerOnce: true });
});

（代碼＃3）

jQuery(document).ready(function($){
    $('#comments').waypoint(function () {

        var disqus_shortname = 'paulund';

        $.ajax({
            type: "GET",
            url: "http://" + disqus_shortname + ".disqus.com/embed.js",
            dataType: "script",
            cache: true
        });

    }, { offset: '100%', triggerOnce: true });
});

問題：

1. 除了我現在用jQuery做的明顯事實之外，代碼＃1和＃2以及＃1和＃3之間的區別是什么？ 我可能做錯了什么，我完全不知道了嗎？

2. 為什么在使用$.noConflict();啟動時代碼＃2和＃3不起作用$.noConflict(); ？ （ 畢竟我也在文檔中找到了它 。）

例如，這沒有做任何事情。 （但是在瀏覽器控制台中出現錯誤， “Uncaught TypeError：無法調用未定義的方法'noConflict'。” 。）

$.noConflict();
jQuery(document).ready(function($){
    $('#comments').waypoint(function () {

        var disqus_shortname = 'paulund';

        $.ajax({
            type: "GET",
            url: "http://" + disqus_shortname + ".disqus.com/embed.js",
            dataType: "script",
            cache: true
        });

    }, { offset: '100%', triggerOnce: true });
});

Answer 1

不，沒有區別。 我會使用方法3. $.noConflict如果以你的方式使用它應該沒有任何效果。

未捕獲的TypeError：無法調用未定義的方法'noConflict'。 意味着你已經在其他地方使用了$.noConflict 。

Answer 2

兩者之間沒有區別，兩者都是異步加載腳本。 您可以通過在控制台中的DOM資源管理器中查看呈現的腳本標記來親眼看到。 如果需要同步加載，可以使用第一種方法並設置dsq.async = false; 。 如果您在執行某些操作之前依賴於它被加載，請考慮將您的依賴操作添加到腳本的onload回調中，這樣它將是一個非阻塞操作並保持您的頁面加載速度快：

var disqus_shortname = 'paulund';

(function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.onload = function(){ 
       // dependent code goes here
    }
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();