最近在程式設計的時候遇到了以下問題,程式碼如下:

function editLine(CODE) {
	// 點選修改按鈕後,根據點選的條目的ID進行查詢,並將資料展示到介面中
	$("input[id='cablename']").attr("disabled", "disabled"); // 編輯時鎖定名字,自動生成
	PathDwrUtil.getSegById(CODE, callBackFunc);
	function callBackFunc(data) {
		debugger
		var code = data[0].CODE; // 識別碼
		var name = data[0].NAME; // 名稱
		var apointtype = data[0].A_POINTTYPE; // 起點資源型別
		var apoint = data[0].A_POINT; // 起點資源
		var apointname = data[0].A_POINT_NAME; // 起點資源
		var pathbelong = data[0].PATHBELONG; // 所屬線路
		var zpointtype = data[0].Z_POINTTYPE; // 終點資源型別
		var zpoint = data[0].Z_POINT; // 終點資源
		var zpointname = data[0].Z_POINT_NAME; // 終點資源
		var assetunit = data[0].ASSET_UNIT; // 歸口管理單位
		var functionunit = data[0].FUNCTION_UNIT; // 運維單位
		var voltlevel = data[0].VOLTLEVEL; // 電壓等級
		var ocablemodel = data[0].OCABLEMODEL; // 光纜型別
		var ocabletype = data[0].OCABLETYPE; // 光纜型號
		var laymode = data[0].LAYMODE; // 敷設方式
		var length = data[0].LENGTH; // 長度
		var fibercount = data[0].FIBERCOUNT; // 纖芯數目
		$("input[id = 'code'] ").val(code);
		$("input[id = 'cablename'] ").val(name);
		$("input[id = 'pathbelong'] ").val(pathbelong);
		$('#apointtype').combobox('select', apointtype);
		$('#zpointtype').combobox('select', zpointtype);
		PathDwrUtil.getPointList(apointtype, function(data) {
			$('#apoint').combobox({
				data: data, //獲取要顯示的json資料
				 valueField: 'CODE',
				 textField: 'NAME',
				height: fixHeight()
			});
			$('#apoint').combobox('reload', data);
			
		});
		PathDwrUtil.getPointList(zpointtype, function(data) {
			console.log(data);
			$('#zpoint').combobox({
				data: data, //獲取要顯示的json資料
				 valueField: 'CODE',
				 textField: 'NAME',
				height: fixHeight()
			});
			$('#zpoint').combobox('reload', data);
			
		});
        $('#apoint').combobox('select', apoint);
        $('#zpoint').combobox('select', zpoint);
    	$('#assetunit').combotree('setValue', assetunit);
		$('#functionunit').combotree('setValue', functionunit);
		$('#voltlevel').combobox('select', voltlevel);
		$('#ocablemodel').combobox('select', ocablemodel);
		$('#laymode').combobox('select', laymode);
		$("input[id = 'ocabletype'] ").val(ocabletype);
		$("input[id = 'length'] ").val(length);
		$("input[id = 'fibercount'] ").val(fibercount);
		$("#pacn").attr("style", "display:block;");
		$("#pacc").attr("style", "display:none;");
		$("#pacs").attr("style", "height:50%;");
	}
}
 

 最初的時候是這樣的,這裡做了一個依賴,就是zpointtype和apointtype選中發生改變時,apoint和azpoint的候選框內容跟著改變.但是出現了一點問題就是候選框中的值載入不進去,一閃而逝.問題出在哪裡呢?

經過打斷點分析後可知,這兩個combobox的資料載入是最後進行的,換句話說,程式碼是先給apoint和zpoint賦值後才把這兩個combobox的候選框的內容載入進去,也就造成了先給框賦值apoint的程式碼35.36,而候選框內容載入進來後發現其名稱並不處於候選內容,從而觸發limitToList : true 屬性而被刪掉,這就是為什麼結果一閃而逝的原因.

因此後續修改為:

function editLine(CODE) {
	// 點選修改按鈕後,根據點選的條目的ID進行查詢,並將資料展示到介面中
	$("input[id='cablename']").attr("disabled", "disabled"); // 編輯時鎖定名字,自動生成
	PathDwrUtil.getSegById(CODE, callBackFunc);
	function callBackFunc(data) {
		var code = data[0].CODE; // 識別碼
		var name = data[0].NAME; // 名稱
		var apointtype = data[0].A_POINTTYPE; // 起點資源型別
		var apoint = data[0].A_POINT; // 起點資源
		var apointname = data[0].A_POINT_NAME; // 起點資源
		var pathbelong = data[0].PATHBELONG; // 所屬線路
		var zpointtype = data[0].Z_POINTTYPE; // 終點資源型別
		var zpoint = data[0].Z_POINT; // 終點資源
		var zpointname = data[0].Z_POINT_NAME; // 終點資源
		var assetunit = data[0].ASSET_UNIT; // 歸口管理單位
		var functionunit = data[0].FUNCTION_UNIT; // 運維單位
		var voltlevel = data[0].VOLTLEVEL; // 電壓等級
		var ocablemodel = data[0].OCABLEMODEL; // 光纜型別
		var ocabletype = data[0].OCABLETYPE; // 光纜型號
		var laymode = data[0].LAYMODE; // 敷設方式
		var length = data[0].LENGTH; // 長度
		var fibercount = data[0].FIBERCOUNT; // 纖芯數目
		$("input[id = 'code'] ").val(code);
		$("input[id = 'cablename'] ").val(name);
		$("input[id = 'pathbelong'] ").val(pathbelong);
		$('#apointtype').combobox('select', apointtype);
		$('#zpointtype').combobox('select', zpointtype);
		PathDwrUtil.getPointList(apointtype, function(data) {
			$('#apoint').combobox({
				data: data, //獲取要顯示的json資料
				 valueField: 'CODE',
				 textField: 'NAME',
				height: fixHeight()
				
			});
			$('#apoint').combobox('reload', data);
			$('#apoint').combobox('select', apoint);
		});
		PathDwrUtil.getPointList(zpointtype, function(data) {
			console.log(data);
			$('#zpoint').combobox({
				data: data, //獲取要顯示的json資料
				 valueField: 'CODE',
				 textField: 'NAME',
				height: fixHeight()
			});
			$('#zpoint').combobox('reload', data);
			$('#zpoint').combobox('select', zpoint);
		});
		$('#assetunit').combotree('setValue', assetunit);
		$('#functionunit').combotree('setValue', functionunit);
		$('#voltlevel').combobox('select', voltlevel);
		$('#ocablemodel').combobox('select', ocablemodel);
		$('#laymode').combobox('select', laymode);
		$("input[id = 'ocabletype'] ").val(ocabletype);
		$("input[id = 'length'] ").val(length);
		$("input[id = 'fibercount'] ").val(fibercount);
		$("#pacn").attr("style", "display:block;");
		$("#pacc").attr("style", "display:none;");
		$("#pacs").attr("style", "height:50%;");
	}
}
 

區別在於,apoint和zpoint的賦值語句是寫在兩個combobox的載入語句段之中的,也就是說只有這兩個載入完畢後,程式碼才會執行賦值語句,從而有效避免了不顯示值的問題.

經驗:善用斷點分析,並且要對js的執行機制與順序有了解.

並且,由此看來calbackfunction的內容一般來說都是最後才展示的