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

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

// 声明一个表示状态的全局变量 status
var 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 同步执行。

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

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

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

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

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

如何等待ajax完成再执行相应操作的更多相关文章

  1. 如何同时完成多个ajax之后再执行某个方法 ? 使用$.when().done();

    jQuery中的$.when()方法比较复杂,这里不作全面讲解,只写一个同时完成多个ajax请求后执行操作的方法. 有时候我们需要等待多个ajax执行完以后,再执行某个操作. 写法如下: $.when ...

  2. ajax请求执行完成后再执行其他操作(jQuery.page.js插件使用为例)

    就我们做知,ajax强大之处在于它的异步请求,但是有时候我们需要ajax执行彻底完成之后再执行其他函数或操作 这个时候往往我们用到ajax的回调函数,但是假如你不想或者不能把接下来的操作写在回调函数中 ...

  3. iOS AFNetWorking中block执行完后再执行其它操作

    需求:同时进行两次网络请求,网络请求是异步的,在网络请求成功后进行其它的操作.两个网络请求是这样,一个网络请求中block执行完之后,再进行其它操作,也是一样的原理,只是这时候不需要线程组了,只需要信 ...

  4. ajax请求完成执行的操作

    var createAjax = $("#createId").ajax(function(){ //ajax操作 }); $.when(createAjax).done(func ...

  5. ExtJS 等待两个/多个store加载完再执行操作的方法

    ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架. Extjs加载Store是异步加载的,这有很多好处.但是当我们要在两个或多个不同的store加载完再执行一些操作 ...

  6. Mysql执行Update操作时会锁住表

    update tableA a,(select a.netbar_id,sum(a.reward_amt) reward_amt from tableB a group by a.netbar_id) ...

  7. CentOS 7在执行yum操作时 报错

    CentOS 7在执行yum操作时, 报错:Could not retrieve mirrorlist http://mirrorlist.centos.org/?release=6&arch ...

  8. query等待ajax执行完毕再继续执行下面代码的操作

    Jquery等待ajax执行完毕再继续执行下面代码的效果,具体代码如下,其实就是将 jquery ajax 函数的 async 参数设置为 false 即可,该参数默认为 true: $(docume ...

  9. C# 多线程join的用法,等待多个子线程结束后再执行主线程

    等待多个子线程结束后再执行主线程 class MultiThread{ #region join test public void MultiThreadTest() { Thread[] ths = ...

随机推荐

  1. Java中时间类中的Data类与Time类

    小简博客 - 小简的技术栈,专注Java及其他计算机技术.互联网技术教程 (ideaopen.cn) Data类 Data类中常用方法 boolean after(Date date) 若当调用此方法 ...

  2. js归并排序实现

    let arr = [3,4,2,8,1,1,2,2,3,3,4,5]; const merge = function(L,M,R) { let arr2=[]; let i=0; let p1 = ...

  3. XCTF练习题---MISC---a_good_idea

    XCTF练习题---MISC---a_good_idea flag:NCTF{m1sc_1s_very_funny!!!} 解题步骤: 1.观察题目,下载附件 2.到手以后发现是一张图片,尝试修改文件 ...

  4. LintCode-165 · 合并两个排序链表-题解

    描述:将两个排序(升序)链表合并为一个新的升序排序链表样例 1:输入: list1 = null, list2 = 0->3->3->null输出: 0->3->3-&g ...

  5. HashMap中红黑树插入节点的调整过程

    如果有对红黑树的定义及调整过程有过研究,其实很容易理解HashMap中的红黑树插入节点的调整过程. "红黑树定义及调整过程"的参考文章:<红黑树原理.查找效率.插入及变化规则 ...

  6. 论文解读《Measuring and Relieving the Over-smoothing Problem for Graph NeuralNetworks from the Topological View》

    论文信息 论文标题:Measuring and Relieving the Over-smoothing Problem for Graph NeuralNetworks from the Topol ...

  7. k8s和Docker关系简单说明

    关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 这篇文章主要介绍了k8s和Docker关系简单说明,本文利用图文讲解的很透彻,有需要的同学可以 ...

  8. 震惊--Nginx的map指令还能这样用

    map指令简单介绍 当然这里写的都是官方文档是已经写过的,我简单抄一下哈. map指令来自于 ngx_http_map_module 模块,提供的核心能力是 基于一个变量创建一个新变量,大概是这意思. ...

  9. 【DIY】【CSAPP-LAB】深入理解计算机系统--datalab笔记

    title: 前言 <深入理解计算机系统>一书是入门计算机系统的极好选择,从其第三版的豆瓣评分9.8分可见一斑.该书的起源是卡耐基梅龙大学 计算机系统入门课(Introduction to ...

  10. Mqtt入门:在线调试连接阿里云

    近期课设需要做个东西,我想要做个上位机更好的显示. 但是一开始学习一样东西,听没头绪的,不知道从哪里入手,尝试过去B站找视频看,但是感觉视频讲的都是基础的东西,不是说人家up主讲的不好,只是对于入门, ...