Question

请帮助解决这个问题：在循环中，我首先调用一个函数，它将改变DIV的内容，然后尝试显示新内容。代码是（简而言之）：

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

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

这是获取功能（实际上它不是我的......我只是在学习如何使用它）

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 这里的内容：你正在向雅虎发出异步页面请求，这意味着你设置浏览器发出请求，然后在你等待时继续处理你的脚本。这就是整个目的。

设置通话后，响应文字无法立即显示，但是当您添加alert时，您正在添加刚刚发生的人类相关延迟足够长在你的情况下，异步请求返回。

你可以使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。我修了一些缩进。

Answer 3

听起来你并不了解异步通信是什么或它是如何工作的。在你的代码中，当这一行被执行时：

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

ajax-call（fetch()）仍在运行。通过将“无用”警报置于适当位置，ajax-call有时间完成，因为下一行将等待您在执行之前单击“ok”。

要解决这个问题，你有两种可能性：

将您的请求更改为同步（但几乎每次都是一个坏主意）
使用ajax-request的success-callback来执行应该等待请求完成的代码

编辑：你没有发布fetch()的代码，所以猜测你在那里使用了一些jquerys的ajax函数...完整的代码本来不错。

如果我添加“警报”，则无法解释的更改

3 个答案: