Выполнение асинхронного HTTP-запроса — в чем разница между ними?

Это (по умолчанию/официальный) код JavaScript для загрузки комментариев Disqus на веб-страницу:

(КОД №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. Почему коды #2 и #3 не работают при запуске с $.noConflict();? (В конце концов, я нашел это и в документации.)

Например, это ничего не делает. (Но выдает ошибку в консоли браузера, "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 });
});

javascript asynchronous jquery ajax jquery-waypoints
person its_me    schedule 06.12.2013    source источник
comment
Нет, никакой разницы. Я бы использовал метод 3, возможно, даже сократив его до $.getScript.   -  person Kevin B    schedule 07.12.2013
comment
@KevinB Если возможно, ответьте. Кроме того, я как-то случайно пропустил вопрос ранее. Пожалуйста, взгляните на обновленный вопрос.   -  person its_me    schedule 07.12.2013
comment
Кроме того, ваш # 2 не требует обертки $({...})() вокруг кода создания элемента скрипта - он не должен иметь $ в любом случае, потому что вам не нужен обработчик готовности документа после загрузки страницы, но вы не не нужна анонимная функция из версии #1, когда все это содержится внутри функции пыльника. (Немедленно вызываемая анонимная функция в #1, по-видимому, предназначена для того, чтобы держать переменную dsq вне глобальной области видимости.)   -  person nnnnnn    schedule 07.12.2013
comment
@nnnnnn Итак, вы предлагаете мне сделать это так: pastebin.com/8LUiHLf5 или вот так : pastebin.com/6Uq3yKJG. Правильный?   -  person its_me    schedule 07.12.2013
comment
Если вы хотите использовать № 2, то да, я предлагаю первый из этих образцов pastebin. Если вы хотите использовать jQuery, то я думаю, что имеет смысл использовать № 3 или ваш второй образец pastebin.   -  person nnnnnn    schedule 07.12.2013

Ответы (2)


arrow_upward
3
arrow_downward

Нет, никакой разницы. Я бы использовал метод 3. $.noConflict не должен иметь никакого эффекта, если использовать его так, как вы его используете.

Uncaught TypeError: Cannot call method 'noConflict' of undefined. будет означать, что вы уже использовали $.noConflict где-то еще.

person Kevin B    schedule 06.12.2013
comment
В файле не так много. Посмотрите, пожалуйста, если сможете: pastebin.com/EJcj0hEb. Я не уверен, что заставляет $.noConflict все испортить. - person its_me; 07.12.2013
comment
Да, ничего там не должно быть затронуто $.noConflict. jQuery(document).ready(function($){...}); позволяет безопасно использовать $ в ... без проблем. - person Kevin B; 07.12.2013
comment
Я только что заметил эту ошибку в консоли: Uncaught TypeError: Cannot call method 'noConflict' of undefined. И после поиска я узнал, что решение заключается в объявить локальную переменную jquery. Так документы неверны? - person its_me; 07.12.2013
comment
Нет, это означает, что вы уже использовали $.noConflict в другом месте. - person Kevin B; 07.12.2013
comment
(1) Вы правы. Я думал, что WordPress (CMS, которую я использую) загрузил файл jQuery по умолчанию. Но я заметил, что в конце есть вот это: jQuery.noConflict();. Это решает загадку. Не могли бы вы добавить это к своему ответу, чтобы я мог отметить его? (2) Я не думаю, что использование getScript является хорошей идеей, поскольку оно устанавливает для параметра кеша значение false. Итак, я должен был бы сделать $.ajaxSetup({ cache: true });. Вместо этого я планирую придерживаться самого .ajax. Пожалуйста, дайте мне знать, если я ошибаюсь, если нет, добавьте примечание об этом к своему ответу, чтобы он был полным со всеми подробностями для дальнейшего использования. :) Спасибо большое! - person its_me; 07.12.2013
comment
В этом случае, как я уже говорил ранее (только если вы не возражаете), отметьте это также в своем ответе. Например, например, getScript устанавливает для параметра кеша значение false, поэтому вам придется добавить $.ajaxSetup({ cache: true });, чтобы снова включить его, если вам это нужно. Что-то такое. - person its_me; 07.12.2013
comment
имея в виду кэширование, я бы использовал то, что у вас уже есть. я просто удалю свой пример кода. - person Kevin B; 07.12.2013
comment
Большое спасибо за уделенное время! - person its_me; 07.12.2013

arrow_upward
2
arrow_downward

Между ними нет никакой разницы, оба загружают скрипт асинхронно. Вы можете убедиться в этом сами, просмотрев отображаемый тег скрипта в проводнике 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);
})();
person Rob M.    schedule 06.12.2013