快捷導(dǎo)航

JS多個異步請求按順序執(zhí)行next實現(xiàn)解析

更新時間：2019年09月16日 09:57:51 作者：muamaker

這篇文章主要介紹了js多個異步請求按順序執(zhí)行next實現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

在js里面，偶爾會遇見需要多個異步按照順序執(zhí)行請求，又不想多層嵌套，，這里和promise.all的區(qū)別在于，promise或者Jquery里面的$.when 是同時發(fā)送多個請求，一起返回，發(fā)出去的順序是一起；這里是按照順序發(fā)請求

首先創(chuàng)建一個迭代器，接收任意多個函數(shù)參數(shù)

function nextRegister(){
      var args = arguments;
      var count = 0;
      var comm = {};
      function nextTime(){
        count++;
        if(count < args.length){
          if(args[count] && Object.prototype.toString.call(args[count]) == '[object Function]'){
            args[count](comm,nextTime);
          }
        }
      }
      if(args[count] && Object.prototype.toString.call(args[count]) == '[object Function]'){
        args[count](comm,nextTime);
      } 
    }

創(chuàng)建多個異步的函數(shù)，注入到迭代器中

/*
     comm:多個函數(shù)，公用的變量
     next:調(diào)用下一個函數(shù)
     * */
    function fn1(comm,next){
      console.log('1');
      comm.age = 20;
      next();
    }
    function fn2(comm,next){
      next();
      console.log('2');
      console.log(comm.age);
    }
    function fn3(comm,next){
      console.log('3');
    }
//開始執(zhí)行迭代
nextRegister(fn1,fn2,fn3);

在這里，fn1-fn3函數(shù)中，做異步操作，知道在異步成功的時候調(diào)用next()就可以繼續(xù)執(zhí)行下一個函數(shù)，同時可以將前面函數(shù)返回的結(jié)果，綁定在comm上，帶到下一個函數(shù)中

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript中對象的不同創(chuàng)建方法
js對象與一般的面向?qū)ο蟮某绦蛟O(shè)計語言有所不同的。js中的對象是基本原型的。下面給大家介紹js中對象的不同創(chuàng)建方法，非常不錯，感興趣的朋友一起學(xué)習(xí)吧
2016-08-08
探究一道價值25k的螞蟻金服異步串行面試題
這篇文章主要介紹了探究一道價值25k的螞蟻金服異步串行面試題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
js如何讀取csv內(nèi)容拼接成json
這篇文章主要介紹了js如何讀取csv內(nèi)容拼接成json，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
16個最流行的JavaScript框架[推薦]
這篇文章列舉了當(dāng)下最流行的16個 JavaScript 框架，既包含 jQuery 和 Mootools 等常規(guī)框架，也有Zepo這種支持智能手機(jī)觸摸功能的移動JavaScript框架，如果你有更好的框架推薦，歡迎與我們分享。
2011-05-05
JavaScript使用Promise實現(xiàn)并發(fā)請求數(shù)限制
本文主要介紹了JavaScript使用Promise實現(xiàn)并發(fā)請求數(shù)限制，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
基于JS實現(xiàn)01支付后的10秒倒計時
這是一個通過js實現(xiàn)的支付后的頁面，點(diǎn)擊支付會跳出一個彈窗，提示你是否要確定支付，確定后進(jìn)入付后界面，該頁面有著10秒倒計時，計時結(jié)束后便會返回原界面，也可以選擇立刻返回，來返回主頁面，這篇文章主要介紹了基于JS實現(xiàn)01支付后的10秒倒計時,需要的朋友可以參考下
2023-03-03
PNGHandler-借助JS讓PNG圖在IE下實現(xiàn)透明（包括背景圖）
PNGHandler-借助JS讓PNG圖在IE下實現(xiàn)透明（包括背景圖）...
2007-08-08
如何在webpack項目中調(diào)試loader插件
最近在學(xué)習(xí)webpack，本文主要介紹了loader插件的調(diào)試方法，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-06-06
關(guān)于微信公眾號開發(fā)無法支付的問題解決
這篇文章主要介紹了關(guān)于微信公眾號開發(fā)無法支付的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
用canvas 實現(xiàn)個圖片三角化（LOW POLY）效果
這篇文章主要介紹了用canvas 實現(xiàn)個圖片三角化（LOW POLY）效果的相關(guān)資料,需要的朋友可以參考下
2016-02-02