首頁  >  文章  >  web前端  >  JS中AJAX執行順序解決問題詳情(附解決方法)

JS中AJAX執行順序解決問題詳情(附解決方法)

寻∝梦
寻∝梦原創
2018-09-10 15:17:292288瀏覽

這篇文章主要的解釋了關於js中ajax執行順序解決的問題,現在讓我們來看看這篇關於ajax的執行順序解決的文章吧

在JS中我們會遇到執行順序的問題,尤其是AJAX的執行順序,js中預設的執行順序是從上往下執行。

看下面的一段程式碼

    callback:function(value, validator, $field){
		$.ajax({
		  url : window.ctx+"/sys/manager/validateLoginName",
		  data:{loginName:value},
		  type : 'post',
		  dataType : "json",
		  async:true,  
		  success: function(result){
		  if(result!=null)
		  globalVariable.flag=result;
		  alert(1)
		       }});
		  alert(2)
		  if(globalVariable.flag!=1)return true;
		  if(globalVariable.flag==1)return false;	
  }

由於這裡的AJAX是非同步請求,所以在瀏覽器中會先彈出2在彈出1

這樣就會出現問題  假如flag預設是0,執行完AJAX之後會變成1,那麼if語句其實是用0去做的判斷,與我們的目的不相符,我們想要的是用AJAX執行完之後賦值的flag去做if判斷(想看更多就到PHP中文網AJAX開發手冊欄位學習)

#解決:

第一種方法

之所以會出現這樣的問題是因為AJAX採用了非同步請求,所以如果我們想先彈出1再彈出2只需要把AJAX改為同步即可,也就是將async改為false

這樣如果AJAX沒有執行完頁面會出現假死狀態,停止往下執行,只有當AJAX回調走完以後才會往下走

當然我們使用AJAX就是為了異步,所以上面的方法是遇到特殊的需要了可以這樣處理

第二種方法

第二種方法是比較常用的

例如下面一段程式碼

function test(){
	$.ajax({
		  url : window.ctx+"/sys/manager/addUserRole",
		  data:formData,
		  type : 'post',
		  dataType : "json",
	          processData:false,
	          contentType:false,
		  success: function(result){
			  if(result!=null){
				  testCallback();
			  }
		}});
         test2();
 }
function testCallback(){
	alert(1)
}
function test2(){
	alert(2)
}

AJAX是異步的,我們希望先彈出1再彈出2我們只需要把test2放在test的回呼函數中即可

像這樣

function test(){
	$.ajax({
		  url : window.ctx+"/sys/manager/addUserRole",
		  data:formData,
		  type : 'post',
		  dataType : "json",
	      processData:false,
	      contentType:false,
		  success: function(result){
			  if(result!=null){
				  testCallback();
			  }
		}});
}
function testCallback(){
	alert(1)
	test2()
}
function test2(){
	alert(2)
}

這篇文章到這就結束了(想看更多就到PHP中文網AJAX使用手冊欄位中學習),有問題的可以在下方留言提問。

以上是JS中AJAX執行順序解決問題詳情(附解決方法)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn