jquery onblur事件中调用focus方法获取不到焦点问题

jquery onblur事件中调用focus方法获取不到焦点问题

jsp
<input type='text' name='name' onblur="test($(this))" />
js
function test($ele){
if(true){
alert("测试获取焦点");
$ele.focus();
}
}

问题描述：

这段代码主要用于表单中实时验证输入的内容是否符合规则，

不符合规则当前输入框获取焦点，方便重新键入。

按说这样写，没有问题，

实际效果却不如人意，alert弹出提示框后，当前input输入框并没有获取焦点。

解决方案：

在setTimeout方法中调用focus方法

jsp
<input type='text' name='name' onblur="test($(this))" />
js
function test($ele){
if(true){
alert("测试获取焦点");

setTimeout(function() {
$ele.focus();
}, 0);
}
}

问题浅析：

是什么原因呢，原来，当前input失去焦点前会调用test方法，

这时，input还没有失去焦点，在test方法中 当前input调用focus方法就会失效。

怎么解决呢，需要了解一下javascript引擎执行任务的原理，

这里简述一下，有什么不对的地方，可以指出。

JavaScript引擎是单线程运行的,并且基于事件驱动，这些事件被放置在一个任务队列中，等待引擎来处理。并且引擎在处理任务时是处理完一个，才会处理另一个任务。

了解了这个原理，问题就凸显出来了，我们执行onblur事件时，input焦点还没有失去，所以再调用focus方法会失效。

使用了setTimeout()定时任务时，javaScript引擎会在任务列表中新添加绑定的任务，这样，调用focus方法的事件，就跟test方法的事件分离，达到了onblur事件执行完成后，input焦点失去，再调用foucs方法获取焦点的效果。