[React 的 onclick 事件函数中:执行语句外面包了一层 setTimeout((...), 0)是啥意思? 谢谢]

2022-11-20 03:16:09 +08:00
 Angela2022
const handleUpdate = (item)=>{
setTimeout(()=>{
updateForm.current.setFieldsValue(item)
},0)
}

如上面代码所示
React 的 onclick 事件函数中:执行语句外面包了一层 setTimeout((...), 0)是啥意思? 谢谢
2631 次点击
所在节点    程序员
10 条回复
westoy
2022-11-20 03:31:35 +08:00
设计 dom 渲染,工程上会出现很多玄学问题。比如你第一行明明插入了一个元素,第二行操作的时候它却有可能还没被生成,所有的这类玄学问题都能通过一个 setTimeout 解决。
westoy
2022-11-20 03:32:44 +08:00
涉及。。。
TWorldIsNButThis
2022-11-20 03:54:57 +08:00
异步执行
Rocketer
2022-11-20 04:05:39 +08:00
关键词:javascript 事件循环
userdhf
2022-11-20 04:18:29 +08:00
拿 Promise 包一下更好...
kongkx
2022-11-20 09:55:44 +08:00
如一楼所说,强行调整执行顺序 ( event loop 相关)。至于是否必要,可以说是个玄学问题(太懒了,不想深究)
eason1874
2022-11-20 12:16:23 +08:00
JS 是单线程,代码排队执行,你想把一段代码放到队伍最后就可以用 setTimeout 0 (看起来是立即执行,其实是等其他事件后立即执行)

比如 1 2 3 三个函数,一般按代码顺序执行,如果你给 2 setTimeout 0 ,那执行顺序就变成 1 3 2
ragnaroks
2022-11-20 18:06:32 +08:00
这里有两种可能。

1 是代码作者不知道如何正确验证 updateForm.current 一定存在,想借 setTimeout 确保 DOM 已经存在。

2 是代码作者不知道如何(在 react 中是 startTransition )正确将任务设置为闲置执行
qzhai
2022-11-21 09:20:20 +08:00
关键字: 微任务、宏任务、Event-Loop

简单来说,有 Promise 这个函数之后,出现了新的执行顺序。

```
setTimeout(_ => console.log(4))

new Promise(resolve => {
resolve()
console.log(1)
}).then(_ => {
console.log(3)
})

console.log(2)

```

上面代码 会 输出 1 2 3 4 。

then 属于微任务,(这个要结合 Event-Loop 的原理去看 为什么异步要先执行微任务 )
setTimeout 这种属于 宏任务,

所以 一般出现 setTimeout 0 秒,是为了晚执行。
amumu666
2022-11-21 09:34:35 +08:00
我估计 onclick 事件还有其他 dom 操作。

这代码是想在新增 dom 渲染之后,再进行赋值操作。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/896510

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX