詳解閉包解決jQuery中AJAX的外部變量問(wèn)題
更新時(shí)間：2017年02月22日 15:18:25 投稿：lqh
這篇文章主要介紹了詳解閉包解決jQuery中AJAX的外部變量問(wèn)題的相關(guān)資料,需要的朋友可以參考下
詳解閉包解決jQuery中AJAX的外部變量問(wèn)題
在AJAX中，我們經(jīng)常都要使用外部變量，經(jīng)常會(huì)多次使用，如下代碼
function getCarInfo(){
for(var i=0;i<4;i++){
var carId = $("#carList0"+i+" #carId").val();
var request = {
city: city,
carId: carId
};
$.ajax({
url:"enquiry",
type:'post',
data:request,
//async: false,
success:function(data){
//alert(data);
var strArr = data.split("#");
$("#carList0"+i+" #distributorId").val(strArr[0]);
$("#carList0"+i+" #font16").html(strArr[strArr.length-1]);
}
});
}
}
我期待的是按順序alert(1) alert(2) alert(3) alert(4)，但是實(shí)際上三次都是alert(4)
這均是由于AJAX異步導(dǎo)致的問(wèn)題，設(shè)置同步（async: false,）就可以解決這個(gè)問(wèn)題，但是隨之而來(lái)的是，效率減低很多。這時(shí)可以輕松使用閉包解決問(wèn)題：
function getCarInfo(){
for(var i=0;i<4;i++){
((function(i){
var carId = $("#carList0"+i+" #carId").val();
var request = {
city: city,
carId: carId
};
$.ajax({
url:"enquiry",
type:'post',
data:request,
//async: false,
success:function(data){
//alert(data);
var strArr = data.split("#");
$("#carList0"+i+" #distributorId").val(strArr[0]);
$("#carList0"+i+" #font16").html(strArr[strArr.length-1]);
}
});
}(i)));
}
}
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
您可能感興趣的文章:
- javascript,jquery閉包概念分析
- jQuery命名空間與閉包用法示例
- jquery和js實(shí)現(xiàn)對(duì)div的隱藏和顯示方法
- JQuery顯示、隱藏div的幾種方法簡(jiǎn)明總結(jié)
- JQuery實(shí)現(xiàn)點(diǎn)擊div以外的位置隱藏該div窗口
- JQuery浮動(dòng)DIV提示信息并自動(dòng)隱藏的代碼
- jquery顯示和隱藏div特效實(shí)例
- JQuery DIV 動(dòng)態(tài)隱藏和顯示的方法
- jquery div提示框漸隱彈出與隱藏效果
- jQuery基于閉包實(shí)現(xiàn)的顯示與隱藏div功能示例
相關(guān)文章
jQuery Mobile的loading對(duì)話框顯示/隱藏方法分享
jQuery Mobile提供兩個(gè)方法，使得開發(fā)者在編寫JavaScript業(yè)務(wù)編輯時(shí)，可以隨意的控制loading提示框2013-11-11
利用jquery動(dòng)畫特效和css打造的側(cè)邊彈出垂直導(dǎo)航
這是一款側(cè)邊彈出垂直導(dǎo)航，整個(gè)彈出過(guò)程比較流暢，而且代碼很簡(jiǎn)單,需要的朋友可以參考下2014-04-04
jquery配合css簡(jiǎn)單實(shí)現(xiàn)返回頂部效果
返回頂部效果想必大家并不陌生吧，其實(shí)實(shí)現(xiàn)方法有很多，在本文為大家介紹下使用jquery是如何輕易實(shí)現(xiàn)的，感興趣的朋友可以參考下2013-09-09
如果你不知道什么是jQuery autocomplete插件，請(qǐng)看圖。你可以測(cè)試一下本站的搜索。當(dāng)然也可以百度一下。2009-04-04
jquery實(shí)現(xiàn)點(diǎn)擊變換導(dǎo)航樣式的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊變換導(dǎo)航樣式的方法,可實(shí)現(xiàn)點(diǎn)擊導(dǎo)航菜單選項(xiàng)時(shí)動(dòng)態(tài)變換對(duì)應(yīng)選中項(xiàng)樣式的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
JQ獲取動(dòng)態(tài)加載的圖片大小的正確方法分享
這篇文章介紹了JQ獲取動(dòng)態(tài)加載的圖片大小的正確方法，有需要的朋友可以參考一下2013-11-11
jquery實(shí)現(xiàn)網(wǎng)頁(yè)查找功能示例分享
當(dāng)需要在頁(yè)面中查找某個(gè)關(guān)鍵字時(shí)，一是可以通過(guò)瀏覽器的查找功能實(shí)現(xiàn)，二是可以通過(guò)前端腳本準(zhǔn)確查找定位，本文介紹通過(guò)jQuery實(shí)現(xiàn)的頁(yè)面內(nèi)容查找定位的功能，并可擴(kuò)展顯示查找后的相關(guān)信息2014-02-02
Jquery獲取第一個(gè)子元素簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇Jquery獲取第一個(gè)子元素簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
Jquery1.9.1源碼分析系列（六）延時(shí)對(duì)象應(yīng)用之jQuery.ready
這篇文章主要介紹了Jquery1.9.1源碼分析系列（六）延時(shí)對(duì)象應(yīng)用之jQuery.ready的相關(guān)資料,需要的朋友可以參考下2015-11-11
jquery插件jquery.beforeafter.js實(shí)現(xiàn)左右拖拽分隔條對(duì)比圖片的方法
這篇文章主要介紹了jquery插件jquery.beforeafter.js實(shí)現(xiàn)左右拖拽分隔條對(duì)比圖片的方法,可實(shí)現(xiàn)圖片拖拽變換的功能,需要的朋友可以參考下2015-08-08