js 判断异步执行完成方法总汇,比如多个ajax执行完毕后执行其他方法

时间: 2018-01-11阅读: 7863标签: ajax

在多个异步操作中,由于不确定异步操作的执行顺序,如何判断异步操作在已经执行完成的情况下,再执行一个新的操作,有哪些方法可以实现?


方法一、函数回调:

js中把函数当做对象来传递,是异步编程最基本的方法,在异步执行完成后,在执行里面的回调方法,这样不会出现程序堵塞的情况,例如:

function fn(callback){
   setTimeout(function(){
      callback("异步后执行");
   }, 1000);
}
function fn_1(data){
	console.log('执行:'+data)
}
fn(fn_1);

说明:

优点:使用简单、设计灵活、比较容易理解。
缺点:不利于代码的阅读和维护,各个部分之间高度耦合,流程会很混乱,而且每个任务只能指定一个回调函数。  


方式二、事件监听:

采用事件驱动模式,方法的执行是根据某个事件的发生来决定的,在异步执行完成后触发事件,来执行新的操作:

var _listeners={};
Function.prototype.on=function(name,fn) { //监听事件:[事件名称,执行方法]
	if(typeof fn === "function") {
        _listeners[name]=fn;
    }  
};
Function.prototype.trigger=function(name,data){ //执行事件:[事件名称,传递数据]
	if(name && _listeners[name]){  
	   _listeners[name](data);
	}
};
function fn(){
  setTimeout(function(){ 
    fn.trigger('done',"异步后执行");//fn发起done的事件
  }, 1000);
}
function fn_1(data){
	console.log('执行:'+data);
}
fn.on('done', fn_1);
fn();

说明:

采用这种方法可以绑定多个事件,指定多个操作,有利于模块化,但是程序都变成了事件驱动,对运行流程变的不那么清晰。


方法三:Promises对象

采用Promise来包装异步操作,然后定义async 函数,用await等待promise异步执行完成后,执行新的操作

function fn() {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            resolve('异步后执行')
        }, 1000)
    })
}
var fn_1 = async function() {
    var data = await fn();//等待异步操作执行完了后执行的方法
    console.log('执行:'+data);
}
fn_1();

说明:

实现起来简洁高效,不仅实现了回调逻辑的解耦,还实现了基础的异步流程控制


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 网页游戏  直播/交友   H5游戏

链接: http://www.fly63.com/article/detial/347

使用原生Ajax进行用户名重复的检验

XMLHtttpRequest对象调用status属性可获得服务器返回的 HTTP 状态码,Ajax请求时,加了个一时间戳,目的是防止浏览器使用缓存。因为在浏览器开了缓存的情况下,对同一链接的相同参数

Ajax跨域CORS

在Ajax2.0中多了CORS允许我们跨域,但是其中有着几种的限制:Origin、Methods、Headers、Credentials;Origin当浏览器用Ajax跨域请求的时候,会带上一个请求头“Origin: 协议://页面域名”,

模仿jquery封装ajax功能

因为有时候想提高性能,只需要一个ajax函数,不想引入较大的jq文件,尝试过axios,可是get方法不支持多层嵌套的json,post方式后台接收方式似乎要变。。也许是我不太会用吧。。其实换个方式接收也没什么,只是习惯了JQ序列化参数

Ajax异步请求

其实我理解前端如何通过url从后端获取数据,对于异步请求Ajax一直表示有点迷惑,所谓不尝试和不探索,光靠看概念你是永远不能理解代码的魅力的,正好公司的项目里用到了最经典的Ajax,正好作为一个案例来学习如何用json的Data

ajax延时请求问题

在做实时搜索时,给input标签设置input propertychange监听,然后进行实时请求,如果在监听事件里面直接进行请求,就会导致每一次输入的变化都会进行请求,但是有时候搜索词可能比较长,并不希望前面每次的变化都进行请求

谈CSRF与JSONP设置header问题

在CSRF/JSONP劫持的运用上,CORS跨域被限制的情况下不存在了,因此AJAX的GET/POST一堆灵活操作没法用。JSONP也无法设置header、cookie等。FORM表单请求的方式当然也没法设置header

ajax提交 使用css 控制按钮防止重复点击

有时候遇到ajax提交数据时 多点几次会出现重复点击的情况.所以下面介绍一个用css控制防重复点击的效果,submitting 是一个类 没有任何意思,也可以写成变灰度的效果

JQuery中的ajax

ajax() 方法用于执行 AJAX(异步 HTTP)请求。 所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。语法

ajax请求中的contentType和dataType

contentType设置你发送给服务器的格式,有以下三种常见情况。application/x-www-form-urlencoded :默认值,application/json:服务端消息主体是序列化后的 JSON 字符串。

$.ajax防止多次点击重复提交的方法

第一种:使用$.ajaxPrefilter( [dataTypes], handler(options, originalOptions, jqXHR) ) 方法;第二种:使用beforeSend选项,在发送请求前将提交按钮变为不可用的状态;

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全