JavaScript同步與非同步任務問題詳解

2022-07-19 14:00:43

js會出現非同步問題場景

延時操作
資料請求同非同步
promise 非同步
回撥涵數（最常見多內建涵數支援接收回撥涵數來非同步程式碼）
事件監聽如，click事件等非同步
訂閱與釋出

今天遇到的問題是，請求資料時間太長，會先執行之後的程式碼，

初步預想的解決方法：

使用箭頭涵數，使用涵數的返回值，讓請求與之後的程式碼同步執行
非同步請求修改變成同步
async/await-Promise-讓非同步操作同步執行
開關涵數
延時操作

標題延時操作

缺點：不知請求資料需要多長時間，之後的資料需要延遲多少時間展示，是個問題。

      function tes0t() {
        fn1();
        fn2();
        fn3();
      }
      function fn1() {
        console.log(1);
      }
      function fn2(） {
        setTimeout(function () {
          console.log(2);
        }, 1000);
      }
      function fn3() {
        setTimeout(function () {
          console.log(3);
        }, 0);
      }
      tes0t();

開關涵數

預期輸出是：1，2，3，

實際輸出是：1，3，2，

所以達不到想要的效果

var kai=false
      function tes0t() {
        fn1();
        fn2();
        fn3();
      }
      function fn1() {
        console.log(1);
      }
      function fn2() {
        setTimeout(function () {
          console.log(2);
          kai= true;
        }, 1000);
        //   console.log();
      }
      function fn3() {
        setTimeout(function () {
          console.log(3);
        }, 0);
      }
      tes0t();

jQuery非同步請求設定為同步請求

是否達到預期效果，不知道

$.ajaxSettings.async = false;//同步請求
 Global_MBPage.$gt(url, params, function (json) {}
 $.ajaxSettings.async = true;//非同步請求 - 預設是非同步

使用箭頭涵數，涵數的返回值，讓請求與之後的程式碼同步執行

測試是可以達到預期效果，輸出結果是1，2，3

      function tes0t() {
        fn1();
        fn2(1, 1, () => {fn3();});
      }
      function fn1() {
        console.log(1);
      }
      function fn2(n1, n2, n3) {
        setTimeout(function () {
          console.log(2);
          if (n3) n3.call();//返回值的設定
        }, 1000);
      }
      function fn3() {
        setTimeout(function () {
          console.log(3);
        }, 0);
      }
      tes0t();

async/await-Promise-讓非同步操作同步執行

function fn4(){
  return new Promise(resolve=>{
    setTimeout(function(){
      msg='等啥 '
      resolve(msg)
    },1000)
  })
}
async function aC(){
  var result = await fn4();
  console.log(result);
}
aC()

// 輸出為‘ 等啥 ’

到此這篇關於JavaScript同步與非同步任務問題詳解的文章就介紹到這了,更多相關JavaScript同步與非同步內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

JavaScript同步與非同步任務問題詳解

目錄

js會出現非同步問題場景

標題延時操作

開關涵數

jQuery非同步請求設定為同步請求

熱門文章