ajax同步或alert對onblur和onclick順序有影響導致提交要點兩次
阿新 • • 發佈:2018-11-17
<input id="phone" name="phone" onblur='checkPhone();' type="text">
<button type="button" id="sub" onclick='sub();'>提交</button>
<script type="text/javascript">
function checkPhone(){alert('checkPhone');}
function sub(){alert('sub');}
</script>
填寫手機號碼以後,立即點選提交,會發現只調用了checkPhone,沒有呼叫到sub,點選第二次才呼叫sub。
如果不使用alert,換成比如$().html();其他的動作,不會出現這個情形。
預期的效果,是點選提交時先呼叫checkPhone,然後呼叫sub,但是卻必須點選提交按鈕兩次才行。
這裡把alert換成ajax提交併且設定引數非同步async為false。效果和alert一樣。如果設定為true,便正常。
原因就是alert和ajax同步時對onblur和onclick順序有影響。似乎有某種鎖定的作用。
解決辦法:1個方法是onclick改為onmousedown,這樣在滑鼠擊下時就會彈窗彈出來。onclick是擊下並鬆開是才動作。這個方法不太符合操作習慣。
2是在ajax裡面設定async為變數,預設為true。
var async = true; $.ajax({ type: "post", url: "/member/checkPhoneByMbId.do", dataType: "json", data:{ phone:$("#phone").val() }, async: async, contentType: "application/x-www-form-urlencoded; charset=UTF-8", success: function(msg){ phoneFlag == true })
提交時如果要呼叫一次onblur,則設定ajax為同步
async = false;
$("#phone").blur();
async = true;
if(phoneFlag == true)