快捷導(dǎo)航

淺談js的ajax的異步和同步請(qǐng)求的問(wèn)題

更新時(shí)間：2016年10月07日 12:01:42 投稿：jingxian

下面小編就為大家?guī)?lái)一篇淺談js的ajax的異步和同步請(qǐng)求的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

先來(lái)看以下代碼：

var flag=true;
var index=0;
$.ajax({
  url: "http://m.fzitv.net/",
  success: function(data){
    flag=false;
  }  
});
while(flag){
  index++;
}
alert(index);

請(qǐng)問(wèn)最后alert的index的結(jié)果是多少？

可能有人會(huì)說(shuō)0唄。實(shí)際上卻沒(méi)那么簡(jiǎn)單。大家可以自己試試看?？梢钥吹阶罱K程序進(jìn)入了一個(gè)死循環(huán)！怎么會(huì)這樣呢！

我們?cè)诳匆欢未a：

var flag=true;
$.ajax({
  url: "http://m.fzitv.net/",
  success: function(data){
    flag=false;
  }  
});
alert(flag);

大家看最后alert出flag的值是多少呢？沒(méi)錯(cuò)，是true！為什么呢？明明我們?cè)赼jax請(qǐng)求成功了將flag設(shè)為false，怎么還是true呢？這實(shí)際上是Ajax的異步機(jī)制造成的。

這里解釋一下，同步和異步。js是單線程的，由于執(zhí)行ajax請(qǐng)求會(huì)消耗一定的時(shí)間，甚至出現(xiàn)了網(wǎng)絡(luò)故障而遲遲得不到返回結(jié)果；這時(shí)，如果同步執(zhí)行的話，就必須等到ajax返回結(jié)果以后才能執(zhí)行接下來(lái)的代碼，如果ajax請(qǐng)求需要1分鐘，程序就得等1分鐘。如果是異步執(zhí)行的話，就是告訴ajax代碼“老兄，既然你遲遲不返回結(jié)果，我先不等你了，我還有一大堆代碼要執(zhí)行，等你執(zhí)行完了給我說(shuō)一下”。

Ajax默認(rèn)是異步請(qǐng)求的，所以就出現(xiàn)了上面我們看到的結(jié)果。也就是ajax里面的代碼還沒(méi)有執(zhí)行完，先執(zhí)行了下面的代碼。

那么如何使Ajax執(zhí)行同步請(qǐng)求呢？這就需要設(shè)置async。

代碼如下：

var flag=true;
var index=0;
$.ajax({
  url: "http://m.fzitv.net/",
  async:false,
  success: function(data){
    flag=false;
  }  
});
while(flag){
  index++;
}
alert(index);

async默認(rèn)是true，也就是異步，我們?cè)O(shè)置為false，即為同步。這時(shí)我們?cè)倏纯唇Y(jié)果吧。

以上就是小編為大家?guī)?lái)的淺談js的ajax的異步和同步請(qǐng)求的問(wèn)題全部?jī)?nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章:

相關(guān)文章

詳解javascript表單的Ajax提交插件的使用
本文主要介紹了javascript表單的Ajax提交插件的使用，具有一定的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2016-12-12
javascript模擬枚舉的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)javascript模擬枚舉的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-03-03
談?wù)凧S中的!!
!!一般用來(lái)將后面的表達(dá)式強(qiáng)制轉(zhuǎn)換為布爾類型的數(shù)據(jù)（boolean），也就是只能是true或者false。下面看看通過(guò)本文給大家介紹了JS中的!!，需要的朋友參考下吧
2017-12-12
JavaScript動(dòng)畫(huà)原理之如何使用js進(jìn)行動(dòng)畫(huà)效果的實(shí)現(xiàn)
在現(xiàn)在做頁(yè)面很多時(shí)候都會(huì)用上動(dòng)畫(huà)效果,比如下拉菜單,側(cè)邊搜索欄,層的彈出與關(guān)閉等等,下面這篇文章主要給大家介紹了關(guān)于JavaScript動(dòng)畫(huà)原理之如何使用js進(jìn)行動(dòng)畫(huà)效果實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2023-04-04
Javascript實(shí)現(xiàn)登錄框拖拽效果
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)登錄框拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
JavaScript之瀏覽器對(duì)象_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
JavaScript可以獲取瀏覽器提供的很多對(duì)象，并進(jìn)行操作。下面通過(guò)本文給大家介紹JavaScript之瀏覽器對(duì)象的相關(guān)知識(shí)，一起看看吧
2017-07-07
Javascript數(shù)組的?splice?方法詳細(xì)介紹
這篇文章主要介紹了Javascript數(shù)組的splice方法詳細(xì)介紹，splice方法通過(guò)刪除或替換現(xiàn)有元素或者原地添加新的元素來(lái)修改數(shù)組,并以數(shù)組形式返回被修改的內(nèi)容。此方法會(huì)改變?cè)瓟?shù)組
2022-09-09
js實(shí)現(xiàn)表單項(xiàng)的全選、反選及刪除操作示例
這篇文章主要介紹了js實(shí)現(xiàn)表單項(xiàng)的全選、反選及刪除操作,結(jié)合實(shí)例形式分析了基于dedecms后臺(tái)使用js實(shí)現(xiàn)表單項(xiàng)的全選、反選及刪除相關(guān)操作技巧,需要的朋友可以參考下
2020-06-06
javascript實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼案例
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
checkbox勾選判斷代碼分析
我們?cè)谧鲰?xiàng)目的時(shí)候，特別是注冊(cè)用戶的時(shí)候，基本上都需要有注冊(cè)協(xié)議之類的東西，那么我們?nèi)绾闻袛嘤脩羰欠窆催x了同意了此協(xié)議呢？
2014-06-06