详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)


Posted in Javascript onFebruary 10, 2017

test.html

<a href="javascript:void(0)" rel="external nofollow" onmouseover="testAsync()">
asy.js

function testAsync(){
  var temp;
  $.ajax({
    async: false,  //同步请求
    type : "GET",
    url : 'tet.php',
    complete: function(msg){
      alert('complete');
    },
    success : function(data) {
      alert('success');
      temp=data;
    }
  });
  alert(temp);
}

 

tet.php

<?php
  echo "here is html code";
  sleep(5);
?>

说明

async: false,(默认是true);

如上:false为同步,这个 testAsync()方法中的Ajax请求将整个浏览器锁死,只有tet.php执行结束后,才可以执行其它操作。

当async: true 时,ajax请求是异步的。

但是其中有个问题:testAsync()中的ajax请求和其后面的操作是异步执行的,那么当tet.php还未执行完,就可能已经执行了 ajax请求后面的操作,如: alert(temp+'   end'); 然而,temp这个数据是在ajax请求success后才赋值的,结果,输出时会为空。

----------------------------------------------------

由于ajax默认为异步调用,所以很少能直接拿到ajax的返回值。但有时候由于业务需要还必须要通过ajax来拿,那么我这里提供两种方案。

具体方法:

1、就像通过设置async:false让其异步变同步;

2、可以将接下来需要使用到的参数在success之内执行。

这两种方案,你根据你项目的具体实际选择一个。

使用第一种相对来讲,假如你对性能要求不是太大可以选择。

以上这篇详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
关于vue-router路径计算问题
May 10 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
JS实现密码框效果
Sep 10 Javascript
vue组件的路由高亮问题解决方法
May 11 Vue.js
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 #Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 #Javascript
Bootstrap轮播图学习使用
Feb 10 #Javascript
微信小程序模板之分页滑动栏
Feb 10 #Javascript
三种方式实现瀑布流布局
Feb 10 #Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 #Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 #Javascript
You might like
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
js单例模式详解实例
2013/11/21 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python批量制作雷达图的实现方法
2016/07/26 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
python os模块简单应用示例
2019/05/23 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
Python threading的使用方法解析
2019/08/28 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
生物科学专业职业规划书范文
2014/02/11 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
年底个人总结范文
2015/03/10 职场文书