执行异步 HTTP 请求 - 这两者有什么区别？答案

【问题标题】：Doing an asynchronous HTTP request - what's the difference between these two?执行异步 HTTP 请求 - 这两者有什么区别？
【发布时间】：2013-12-06 21:53:46
【问题描述】：

这是用于在网页上加载 Disqus cmets 的（默认/官方）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 请求；但这不是重点。

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

（代码 #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 });
});

问题：

除了我现在用 jQuery 做这件事的明显事实之外，代码 #1 和 #2 和 #2 之间有什么区别吗？ strong>#1 和 #3，是吗？我可能做错了什么，我完全错过了？
为什么代码 #2 和 #3 在以 $.noConflict(); 开头时不起作用？ (After all I found it in the docs as well.)

例如，这不会做任何事情。（但在浏览器控制台中出现错误，“Uncaught TypeError: Cannot call method 'noConflict' of undefined.”。）

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

【问题讨论】：

不，没有区别。我会使用方法 3，甚至可能缩短为 $.getScript。
@KevinB 如果可能，请回答。另外，我不知何故碰巧错过了早些时候的一个问题。请查看更新后的问题。
顺便说一句，您的 #2 不需要 $({...})() 包装脚本元素创建代码 - 在任何情况下它都不应该有 $ 因为您不需要页面加载后准备好文档处理程序，但是当整个内容包含在另一个函数中时，您也不需要 #1 版本中的匿名函数。（#1 中立即调用的匿名函数大概是为了将dsq 变量保持在全局范围之外。）
@nnnnnn 所以，你建议我这样做：pastebin.com/8LUiHLf5 或这样：pastebin.com/6Uq3yKJG。对吗？
如果你想使用#2，那么是的，我建议的是第一个 pastebin 样本。如果您想使用 jQuery，那么我认为使用 #3 或您的第二个 pastebin 示例更有意义。

标签： javascript jquery ajax asynchronous jquery-waypoints

【解决方案1】：

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

Uncaught TypeError: Cannot call method 'noConflict' of undefined. 意味着您已经在其他地方使用过$.noConflict。

【讨论】：

文件中没有太多内容。在这里，如果可以的话，请看一下：pastebin.com/EJcj0hEb。我不确定是什么导致$.noConflict 搞砸了。
是的，$.noConflict 不会影响其中的任何内容。 jQuery(document).ready(function($){...}); 允许您在 ... 内安全地使用 $ 而不会出现问题。
我刚刚在控制台中注意到了这个错误：Uncaught TypeError: Cannot call method 'noConflict' of undefined. 搜索后，我知道解决方案是 declare local jquery variable。那么文档错了吗？
不，这意味着您已经在其他地方使用过 $.noConflict。
(1) 你是对的。我认为 WordPress（我使用的 CMS）加载了默认的 jQuery 文件。但我注意到它最后有这个：jQuery.noConflict();。这解决了难题。您能否将其添加到您的答案中，以便我可以标记它？ (2) 我不认为使用getScript 是一个好主意，因为它将缓存设置为false。所以，我必须做$.ajaxSetup({ cache: true });。相反，我打算坚持使用.ajax 本身。如果我错了，请告诉我，如果没有，请在您的答案中添加一个注释，以便完整地包含所有详细信息以供将来参考。 :) 非常感谢！

【解决方案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);
})();

【讨论】：