javascript - 如果我添加 "alert"会发生无法解释的变化

Question

请帮忙解决这个问题:在一个循环中，我首先调用一个函数，该函数将更改 DIV 的内容，然后尝试显示新内容。代码是(简而言之):

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

“Fetch”是一个使用jQuery打开指定URL并将内容粘贴到DIV“prova”中的函数。看到评论的“警报”了吗？如果我保留它的评论，“获取”将完美运行(我在浏览器窗口中看到获取的代码)但第二个警报没有!它显示 PREVIOUS DIV 内容(即，第一次它是空白的，在第二次迭代时将显示第一次迭代的内容，等等......)。但是，如果我取消对第一个警报的注释，第二个警报就可以正常工作。它显然看起来像一个同步问题，但我已经尝试了很多方法(即超时、ifs、..)，但我无法解决它。有什么建议吗？

这里是fetch函数(其实不是我的……我只是在学习怎么用)

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

您似乎完全忽略了这里的 AJAX 是什么:您正在向 Yahoo 发出异步页面请求，这意味着您设置了发出请求的浏览器，然后在等待期间继续处理您的脚本.这就是全部目的。

响应文本在您设置调用后不会立即可用，但是当您添加一个警报时，您正在添加一个人为相关的延迟，恰好是在您的情况下，足够长的时间让异步请求返回。

您可以使 AJAX 请求同步(“AJAX”作为“异步 Javascript 和 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。我修复了一些缩进。