<input id="phone" name="phone" οnblur='checkPhone();' type="text">
<button type="button" id="sub" οnclick='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)