关于setTimeout的知识点以及setTimeout(0)的使用场景

最新推荐文章于 2024-08-16 10:08:38 发布

是曲水啊

最新推荐文章于 2024-08-16 10:08:38 发布

阅读量1.5k

点赞数 1

分类专栏： javascript 文章标签： setTimeout原理

本文链接：https://blog.csdn.net/qq_42144899/article/details/89708833

版权

本文探讨了JavaScript中setTimeout的原理，特别是setTimeout(0)的使用场景。解释了在onkeydown、onkeypress和onkeyup事件中的行为差异，以及setTimeout如何在事件处理中发挥作用。文章指出，JavaScript是单线程执行的，setTimeout会将任务放入任务队列，等待主线程空闲时执行，因此setTimeout(0)并不意味着立即执行，而是尽可能快地插入队列。

摘要由CSDN通过智能技术生成

试试以下例子：

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
</head>
<body>

<input type="text" onkeydown="show()">
<script type="text/javascript">
  function show(val) {
      setTimeout( () => {
          console.log('inner',document.getElementsByTagName('input')[0].value)
      },0)
      console.log('outer',document.getElementsByTagName('input')[0].value)
  }
</script>
</body>
</html>

输出结果如下：

当把事件名改成keyup的时候，输入和input的value值就是同步的：

<input type="text" onkeyup="show()">
<script type="text/javascr

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

是曲水啊

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

认识延迟时间为0的setTimeout

09-06

这个特性在某些场景下非常有用，比如在例子2中，为了确保`input.focus()`和`input.select()`能正确执行，我们使用了延迟时间为0的`setTimeout`包裹这两个方法。这是因为当在事件处理器（如`onkeypress`）内部直接...

Js中setTimeout()和setInterval() 何时被调用执行的用法

12-11

定义setTimeout()和setInterval()经常被用来处理延时和定时任务。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。从定义上我们可以看到两个函数十分类似，只不过前者执行一次，而后者可以执行多次，两个函数的参数也相同，第一个参数是要执行的code或句柄，第二个是延迟的毫秒数。很简单的定义，使用起来也很简单，但有时候我们的代码并不是按照我们的想象精确时间被调用的，很让人困惑简单示例看个简单的例子,简单页面在加载完两秒后，写下Delayed al

参与评论您还未登录，请先登录后发表或查看评论

setTimeout()和setInterval() 何时被调用执行

weixin_33743248的博客

04-05

488

JS中【setTimeout】使用注意事项总结

热门推荐

郑长风

10-15

14万+

　1. SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function 1.3 SetTimeOut()语法例子 1.4 设定条件使SetTimeOut()停止 1.5 计分及秒的counter 2. Cle

setTimeout(function(){}, 0);

weixin_33754913的博客

03-24

247

1 for (var i = 0; i < 3; i++) { 2 setTimeout(function() { 3 console.log(i); 4 }, 0); 5 console.log(i); 6 } 结果是： 0 1 2 3 3 3 分析： 1、在实践中，setTimeout 会在其完...

一道面试题window.setTimeout(() => { test1() }, 0); test2(); test1和2 谁先执行，考察js的异步机制和事件循环基础

一个在全能之路上越走越远的男人。

01-10

475

答案： test2()先执行，然后再执行test1()。原因：JS是单线程的，（PS: 虽然html5中提出了新的web标准，允许javascript 脚本创建多个线程，但子线程完全受主线程控制，且不得进行Dom操作，因此也并没有改变单线程的本质。） setTimeout属于异步操作，JS引擎会把setTimeout的操作加入到JS的任务队列中去，test2()属于主线程上的同步操作，优先执...

JavaScript SetInterval与setTimeout使用方法详解

10-26

以下是关于这两个函数的详细知识点。 ### setTimeout函数 setTimeout函数用于在指定的毫秒数后执行一段代码或者调用一个函数。它的基本语法为： ```javascript window.setTimeout(code, delay); ``` 或者 ```...

JavaScript通过setTimeout实时显示当前时间的方法

10-24

在Web开发中，JavaScript语言提供了方便的时间...以上便是JavaScript通过setTimeout实现时间实时更新的核心知识点。这些操作和技巧对于前端开发者来说是非常实用的，可以帮助他们创建更加动态和交互性强的网页应用。

javascript setTimeout和setInterval计时的区别详解

10-27

通过这些知识点，可以看出setTimeout和setInterval在功能上非常相似，但各自的特点决定了它们在不同的场景下使用。例如，如果只需要延迟执行一次操作，推荐使用setTimeout；如果需要周期性执行操作，可以使用...

setTimeout用法:利用setTimeout在页面上不停的显示当前日期时间

koushr的博客

07-25

1423

function showTime() { var mydate = new Date(); var year = mydate.getFullYear(); var month = mydate.getMonth(); month = month + 1; var day = mydate.getDate(); var hour = mydate.getHours();

温故知新（七七）nextTick 是在本次循环执行，还是在下次，setTimeout(()=＞{},0)呢

MFWSCQ的博客

12-28

457

nextTick 是在本次循环执行，还是在下次，setTimeout(()=>{},0)呢 nextTick 在本次循环执行，且全部执行，setTimeout 在下次循环执行由于 js 是单线程，js 设计者吧任务分为同步任务和异步任务，同步任务都在主线程上排队执行，前面任务没有执行完成，后面的任务会一直等待；异步任务则是挂在一个任务队列里，等待主线程所有任务执行完...

从settTimeout到匿名函数、箭头函数之() =＞ {}

hongdunyang的博客

12-14

1601

1、使用到了setTimeout函数，困惑：为什么使用() => {}。 setTimeout(() => { if (XXX) { this.save(); } this.index = null;}, 10); 2、查看setTimeout()的定义： declare function setTimeout(handler: TimerHandler, timeout?: number, ...arguments: any[])

v-if遇到setTimeout(() =＞ {emit(‘xxx‘)},0)

weixin_41387874的博客

03-04

766

v-if遇到setTimeout(() => {emit(‘xxx’)},0) 一个例子当我们需要在父子组件间通信时候，我们需要使用emit 子组件 setup(props,{emit}){ function handleClick(){ emit('XXX') } } 这时当子组件中触发了点击事件，调用handleClick函数之后，将会发送自定义事件XXX到父组件父组件 <SubComponent v-if="isVisblie" @XXX="onSu

setTimeout实现原理和使用注意

LuckyWinty的博客

11-07

3024

setTimeout，它就是一个定时器，用来指定某个函数在多少毫秒之后执行。setTimeout用法vartimeoutID=setTimeout(function...

settimeout 参数_详解setTimeout(fn,0)

weixin_39826089的博客

12-13

439

最近面试遇到一个题目,是有关setTimeout(fn,0)和闭包应用的,题目如下:for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 0); console.log(i);}我当时想都没想,直接给面试官说,输出0,1,2.结果可想而知^_^。很多公司面试都爱出这道题...

window对象setTimeout()方法

qq_41344259的博客

03-31

632

setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。语法格式可以是以下两种：setTimeout(要执行的代码, 等待的毫秒数),setTimeout(JavaScript 函数, 等待的毫秒数); 一个简单例子: <input type="text" id="displayBox" name="displayBox" value="0"...

setTimeout 用法

weixin_43833851的博客

04-22

1万+

总的来说用法就一种： setTimeout(要执行的代码，间隔时间，参数1，参数2); 但是要执行的代码有几种写法，分别如下：如果执行的代码不需要参数，有3种写法如下： 1，直接将js代码写在字符串中： setTimeout("alert(123)",500); 2，在字符串中调用函数： setTimeout("callFun()",500); function callFun(){ alert(456); } 3，使用匿名函数： setTimeout(()=

JavaScript定时操作：setTimeout与对象绑定

"本文主要探讨JavaScript中的定时操作函数及其应用，并涉及JavaScript中null类型的特性和this关键字的使用。...在实际开发中，合理运用这些知识点可以提升用户体验，创造出动态、交互性强的网页应用。