html按钮延时无效几秒,setTimeout延时0毫秒后执行的作用

工作中经常看到一些代码,使用setTimeout延时0毫秒后执行一些功能函数。这一点令人疑惑,延时0毫秒再执行,不是应该和直接执行代码是同样的效果吗?为什么我们还要使用setTimeout,并设置0毫秒的延时呢?这难道不是多此一举吗?

实则不然。

我们知道,JavaScript的执行是单线程的,而且是按照顺序一条条执行的,除非遇到异步操作,比如Ajax。但是,有种情况比较特殊,就是被setTimeout包裹的代码,它们的执行实际上是异步的,比如以下代码:

alert('1.visit www.4455q.com');

setTimeout(function(){

alert('3.leave it');

}, 0);

alert('2.mark it');

1

2

3

4

5

alert('1.visit www.4455q.com');

setTimeout(function(){

alert('3.leave it');

},0);

alert('2.mark it');

setTimeout包裹的代码,总是最后执行的,通俗地理解,就是setTimeout实现了异步的操作。

那么,这种特性,有什么具体作用呢?比如,

填写域名

1

2

填写域名

我希望触发#btn按钮的mousedown事件的时候,给input[name=domain]填入4455q.com,同时要获取焦点,并且选中,那么,我可能会这样实现(为了方便演示,假设已经引入jquery):

// 代码段1

$('#btn').on('mousedown', function(e){

$('input[name=domain]').val('4455q.com').focus().select();

})

1

2

3

4

// 代码段1

$('#btn').on('mousedown',function(e){

$('input[name=domain]').val('4455q.com').focus().select();

})

然而,实际上,这段代码的执行结果与我预期的有所不同,虽然,值填入了input,但是,并没有获取焦点和选中。如果用setTimeout将代码进行包裹,就实现了我们想要的效果。

// 代码段2

$('#btn').on('mousedown', function(e){

setTimeout(function(){

$('input[name=domain]').val('4455q.com').focus().select();

}, 0);

})

1

2

3

4

5

6

// 代码段2

$('#btn').on('mousedown',function(e){

setTimeout(function(){

$('input[name=domain]').val('4455q.com').focus().select();

},0);

})

问题虽然解决了,但是原因是什么呢?

先看前面的代码段1

显然,在mousedown鼠标按下的时候,代码的执行顺序如下

1.给input[name=address]赋值

2.input[name=address]获得焦点

3.input[name=address]内容被选中

4.最关键的一步:#btn按钮获得焦点(mousedown事件之后,其实会触发focus事件)。

也就是说,第4步的获取焦点,使得前面2,3两步的执行都无效了。

那么,问题就很清楚了,我们如果能够把2,3两步的执行放到第4步的后面,那么,就能很好地实现这个功能了。

前面我们已经提到,setTimeout包裹的代码会延迟执行,可以看成是异步操作。这就是使用setTimeout解决这一问题的原因了,其实就是利用它的特性来重新安排代码的执行顺序。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值