分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

如何等待ajax完成再执行相应操作

发布时间:2023-09-19 22:10责任编辑:郭大石关键词:暂无标签

ajax广泛应用于异步请求,对于大多数业务来说,这是十分方便的,但对于一些特殊的业务,ajax的异步性会起到相反的作用。

例如在ajax请求成功后,后续的操作需要依赖ajax执行成功后的相应操作。

// 声明一个表示状态的全局变量 statusvar status = false;// ajax$.ajax({ ???url:"/checkUsername", ???type:"post", ???success:function(){ ???????status = true; ?} ?});// 根据 status 的状态 进行后续操作function(){ ?if(status){ ???// 后续操作} ?}

以上代码对于不是很清楚ajax运行原理的朋友来说,看似没什么毛病,但其实 status 的值在ajax 请求成功之后进行 if 判断的时候值仍然为 false。

因为 ajax 有个 async 属性,该属性默认为 true,表示 ajax 异步执行,而在进行 if 判断的时候,ajax 的异步执行还没完成,因此 status 的值仍然是 false。

若要保证 status 的值是在 ajax 执行完成之后的最终值,有两种办法:

1、将 ajax 的 async 属性设置为 false,表示 ajax 同步执行。

// 声明一个表示状态的全局变量 statusvar status = false;// ajax$.ajax({ ???url:"/checkUsername", ???type:"post", ???// ajax 同步执行 ???async:false, ???success:function(){ ???????status = true; ?} ?});// 根据 status 的状态 进行后续操作function(){ ?if(status){ ???// 后续操作} ?}

但是这种方式在有些情况下并不好用。推荐第二种方式。

2、利用 jquery 的 when().done 函数 等待 ajax 执行结束之后再进行后续操作。

// 声明一个表示状态的全局变量 statusvar status = false;// ajaxmyajax = $.ajax({ ???url:"/checkUsername", ???type:"post", ???success:function(){ ???????status = true; ?} ?});// 根据 status 的状态 进行后续操作function(){ ?// myajax 请求完毕时执行 ?$.when(myajax).done(function(){ ?????if(status){ ???????// 后续操作 ?????} ?????}) ;}

此时的 status 是在 ajax 执行完成后被重新赋值后的 status ,值为 true。

如何等待ajax完成再执行相应操作

原文地址:https://www.cnblogs.com/elementplay/p/10789600.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved