javascript - 与异步 javascript 同步时遇到问题

Question

我正在我自己的 rss 阅读器中使用 JS、JQuery 和 PHP 将数据作为 JSON 提供服务。我所做的基本上是对我的服务器进行异步调用以获取带有帖子的 JSON，然后在“成功”时我使用“$.each”解析它们并使用 JQuery 加载 DOM 中的内容。所有这些操作都是异步的，但现在我需要按一定的顺序调用它们，当一切完成后，然后调用一个函数来处理数据。为了向您提供有关我的任务的一些背景信息，我正在做的是对一小部分 RSS 源进行查询，以获取最新的帖子。我用它们连接一个字符串，并将该字符串传递给文本转语音服务。我已经设法使用 10 秒的任意 setTimeout 值使其工作，但我的目标是在处理所有源后调用该函数。

这是我的解析器的基本版本:

function urgent_posts(url) {
  $.ajax({
    //the location of my server
    url: 'myPostServer.php?url=' + encodeURIComponent(url),
    dataType: 'json',
    success: function(data) {
      //do this for each entry in the feed
      $.each(data.feed.entries, function(key, value) {
        //validate the date to get just the latest post
        if (is_urgent(value.publishedDate)) {
          //if condition is met save the title
          save_urgent_post_title(value.title);
        }
      });
    }
  });
}

我为“使其发挥作用”所做的工作如下:

$('#test_button').on('click',function(){

  urgent_posts(source_1);
  urgent_posts(source_2);
  urgent_posts(source_3);
  //and so on...
  urgent_posts(source_n);

  setTimeout(function(){
    text_to_speech(get_urgent_post_string);
  },10000);

});

我尝试像这样使用 JQuery 的延迟对象，但没有结果:

function urgent_posts(url) {
  var deferred = $.Deferred();
  $.ajax({
    //the location of my server
    url: 'myPostServer.php?url=' + encodeURIComponent(url),
    dataType: 'json',
    success: function(data) {
      //do this for each entry in the feed
      $.each(data.feed.entries, function(key, value) {
        //validate the date to get just the latest post
        if (is_urgent(value.publishedDate)) {
          //if condition is met save the title
          save_urgent_post_title(value.title);
        }
      });
    }
  });
  return deferred.promise();
}

并将所有内容链接在一起:

$('#test_button').on('click',function(){

  urgent_posts(source_1)
  .then(urgent_posts(source_2))
  .then(urgent_posts(source_3))
  .then(function(){
    text_to_speech(get_urgent_post_string);
  });

});

非常感谢您的意见和建议。

Answer 1

首先，您的延迟对象永远不会被解析。您必须在某处添加 deferred.resolve() 。就在 $.each 循环之后看起来是一个不错的地方。

其次，$.ajax 已经返回了一个 promise 。所以你可以这样写:

return $.ajax({
    //the location of my server
    url: 'myPostServer.php?url=' + encodeURIComponent(url),
    dataType: 'json',
    success: function(data) {
      //do this for each entry in the feed
      $.each(data.feed.entries, function(key, value) {
        //validate the date to get just the latest post
        if (is_urgent(value.publishedDate)) {
          //if condition is met save the title
          save_urgent_post_title(value.title);
        }
      });
    }
  });