JavaScript

Question

我在 JavaScript 中有两个 ajax 调用，它们将内容异步添加到页面。我需要创建一个“超时”函数（或类似的函数），等待它们都完成加载，然后执行更多代码。这是我目前所拥有的

<div class='resultsSection'>
    Example
</div>

<script>

var loading_first = "loading";
var first_ajax = {
  url: 'https://example.com/load.php?q=fast',
  type: "GET",
  success: function( data ) {
        console.log("success");
         $(".resultsSection").append(data);
         loading_first = "done";
  }
};
$.ajax( first_ajax );

var loading_second = "loading";
var second_ajax = {
  url: 'https://example.com/load.php?q=slow',
  type: "GET",
  success: function( data ) {
        console.log("success");
        $(".resultsSection").append(data);
        loading_second = "done";
  }
};
$.ajax( second_ajax );

// Need to create a function that waits until both are done. I know this is wrong
if((loading_first == "done") && (loading_second == "done")){
        console.log("Both done loading, execute more code here");
}

</script>

Answer 1

将 $.ajax 返回的承诺存储在变量中并使用 Promise.all()

const req1 = $.ajax('https://jsonplaceholder.typicode.com/todos/1').then(data => {
  console.log('First request done')
  return data
})

const req2 = $.ajax('https://jsonplaceholder.typicode.com/todos/2').then(data => {
  console.log('Second request done')
  return data
})

Promise.all([req1, req2]).then(results=>{
   console.log('All done')
   console.log('Combined results',results)
}).catch(err=> console.log('Ooops one of the requests failed'))

.as-console-wrapper {max-height: 100%!important;top:0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

JavaScript - 等到多个 ajax 请求完成后再做一些事情

JavaScript - Wait until multiple ajax requests are done then do something

html

ajax

jquery

timeout