Необъяснимые изменения, если я добавлю «предупреждение»

Question

, пожалуйста, помогите по этому вопросу: внутри цикла я сначала вызываю функцию, которая изменит содержимое DIV, а затем пытаюсь отобразить новый контент.Код (кратко):

while (...){
    fetch(website_url);
//  alert("useless");
    x=document.getElementById("prova").textContent;
    alert(x);
}

«Fetch» ​​- это функция, которая использует jQuery для открытия указанного URL-адреса и вставки содержимого в DIV «prova».Видите прокомментированное «предупреждение»?Если я продолжу комментировать, «выборка» работает отлично (я вижу извлеченный код в окне браузера), но второе предупреждение - нет!Он показывает ПРЕДЫДУЩИЙ контент DIV (т. Е. В первый раз, когда он пуст, на второй итерации будет отображаться контент первой и т. Д. И т. Д.).Однако, если я раскомментирую первое предупреждение, второе предупреждение будет работать нормально.Это явно похоже на проблему с синхронизацией, но я пытался разными способами (например, с таймаутами, если ...) и не смог ее решить.Любое предложение?

Вот функция выборки (на самом деле это не мое ... Я только учусь ее использовать)

function fetch(url){
  container = $('#prova');
  doAjax(url);

  function doAjax(url){
    $.getJSON("http://query.yahooapis.com/v1/public /yql?"+"q=select%20*%20from%20html%20where%20url%3D%22"+encodeURIComponent(url)+"%22&format=xml'&callback=?",
function(data){
    if(data.results[0]){
      var data = filterData(data.results[0]);
      container.html(data);
    } else {
      var errormsg = '<p>Error: could not load the page.</p>';
      container.html(errormsg);
    }
  }
}

Answer 1

Этот код зависит от времени.Первое предупреждение создает задержку, в течение которой выборка завершается.

Что вы хотите сделать, это использовать jQuery ajax с обратным вызовом, например,

$.get('ajax/test.html', function(data) {
  $('.result').html(data);
  alert('Load was performed.');
});

см. http://api.jquery.com/jQuery.get/

Answer 2

Вы, похоже, полностью игнорируете, что AJAX здесь : вы делаете асинхронный запрос страницы в Yahoo, что означает, что вы устанавливаете запрос в браузере, а затем продолжаете обрабатывать свой сценарий, пока ждете. Вот и вся цель.

Текст ответа недоступен сразу после установки вызова, но когда вы добавляете alert, вы добавляете задержку, зависящую от человека, которая просто случается , чтобы быть достаточно длинной для асинхронного запроса чтобы вернуться, в вашем случае.

Вы можете сделать запрос AJAX синхронным («AJAX», так как «Асинхронный Javascript And XML» является неправильным и лучше называется XmlHttpRequest):

var url = "http://query.yahooapis.com/v1/public /yql?"+"q=select%20*%20from%20html%20where%20url%3D%22"+encodeURIComponent(url)+"%22&format=xml'&callback=?";

// Your asynchronous call:
$.getJSON(url, function(data) { ... });

// A synchronous alternative:
$.ajax({
    type: 'GET',
    url: url,
    dataType: 'json',
    data: {},
    async: false,
    success: function(data) { ... },
  });

Теперь запрос будет выполнен (или не выполнен) до того, как ваш код продолжится.

Или, чтобы сохранить асинхронный запрос, вы можете переместить код, который вы хотите выполнить после его завершения, в функцию обратного вызова:

while (...) {
    function myFunction() {
        var x = document.getElementById("prova").textContent;
        alert(x);
    }
    fetch_and_handle(website_url, myFunction);
}

function fetch_and_handle(url, handler) {
    var container = $('#prova');
    var url       = "http://query.yahooapis.com/v1/public /yql?"+"q=select%20*%20from%20html%20where%20url%3D%22"+encodeURIComponent(url)+"%22&format=xml'&callback=?";

    $.getJSON(url, function(data) {
       if (data.results[0]) {
          var data = filterData(data.results[0]);
          container.html(data);

          if (handler != undefined) {
              handler();
          }
       }
       else {
          var errormsg = '<p>Error: could not load the page.</p>';
          container.html(errormsg);
       }
   }
}

Я также добавил var в нескольких местах: когда вы создаете локальную переменную, используйте var. И я исправил некоторые отступы.

Answer 3

звучит так, как будто вы не поняли, что такое асинхронная связь или как она работает. в вашем коде, когда эта строка выполняется:

x=document.getElementById("prova").textContent;

Ajax-вызов (fetch()) все еще выполняется. поместив «бесполезное» оповещение, ajax-вызов успевает завершиться, так как следующая строка будет ждать, пока вы нажмете «ок», прежде чем он будет выполнен.

, чтобы решить эту проблему, у вас есть две возможности:

1. изменить ваш запрос, чтобы быть синхронным (но это плохая идея почти каждый раз)
2. используйте callback вашего ajax-запроса для выполнения кода, который должен ждать завершения запроса

РЕДАКТИРОВАТЬ: вы не опубликовали свой код для fetch(), поэтому можно предположить, что вы используете там некоторые из jjerys-ajax-функции ... публикация полного кода будет было приятно.