执行异步HTTP请求 - 这两者之间的区别是什么？

This is the (default/official) JavaScript code for loading Disqus comments on a web page:

这是用于在网页上加载Disqus评论的(默认/官方)JavaScript代码:

(CODE #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>

As I see it, the code does the HTTP request asynchronously; but that's not the point.

在我看来,代码异步地执行HTTP请求;但那不是重点。

The thing is, I needed to make some changes to the code so that the comments are loaded only when the user scrolls down to the comments section, as in, lazy loading. And I've got two working methods to do it.

问题是,我需要对代码进行一些更改,以便仅在用户向下滚动到评论部分时加载注释,如延迟加载。我有两种工作方法可以做到这一点。

(CODE #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 });
});

(CODE #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 });
});

Questions:

Apart from the obvious fact that I am now doing it with jQuery, is there any difference between what the codes #1 and #2, and #1 and #3, do? Could I possibly be doing something wrong, which I am completely missing?

除了我现在用jQuery做的明显事实之外,代码#1和#2以及#1和#3之间的区别是什么?我可能做错了什么,我完全不知道了吗?
Why don't the codes #2 and #3 work when started with $.noConflict();? (After all I found it in the docs as well.)

使用$ .noConflict()时,为什么代码#2和#3不起作用? (毕竟我也在文档中找到了它。)

For instance, this doesn't do anything. (But gives an error in the browser console, "Uncaught TypeError: Cannot call method 'noConflict' of undefined.".)

例如,这没有做任何事情。 (但是在浏览器控制台中出现错误,“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 });
});

2 个解决方案

#1

Nope, no difference. I would use method 3. $.noConflict should not have any effect if used the way you have it.

不,没有区别。我会使用方法3. $ .noConflict如果以你的方式使用它应该没有任何效果。

Uncaught TypeError: Cannot call method 'noConflict' of undefined. would mean that you've already used $.noConflict somewhere else.

未捕获的TypeError:无法调用未定义的方法'noConflict'。意味着你已经在其他地方使用了$ .noConflict。

#2

There is no difference between the two, both are loading the script asynchronously. You can see for yourself by viewing the rendered script tag in the DOM explorer in your console. If you need it to load synchronously you could utilize the first method and set dsq.async = false;. If you are relying on it being loaded before performing some operation, consider adding your dependent operation into a onload callback of the script, that way it will be a non-blocking operation and keep your page loading fast:

两者之间没有区别,两者都是异步加载脚本。您可以通过在控制台中的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);
})();

#1