跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • 看到一段代码, setTimeout(resolve, 0), 不是很明白用意?
未分類
1 9 月 2021

看到一段代码, setTimeout(resolve, 0), 不是很明白用意?

看到一段代码, setTimeout(resolve, 0), 不是很明白用意?

資深大佬 : yazoox 13

const whenStable = async () =>   await act(async () => {     await new Promise((resolve) => setTimeout(resolve, 0));   }); 

原帖地址: https://stackoverflow.com/questions/60137762/how-can-i-test-a-react-hooks-component-by-changing-usestate?rq=1 只有一个回复,回复里面的测试文件,里面用到了这个

不是很理解这个的用意。如果说需要延时,那为什么 setTimeout 的参数是 0? 还是说,作者只是举个例子?应该设为比如 500,etc.?

以及,这个貌似有 warning

Warning: The callback passed to ReactTestUtils.act(...) function must not return anything. 

大佬有話說 (15)

  • 資深大佬 : Puteulanus

    setTimeout 0 不是精确的没有延迟,看这意思是想等待到下个 event loop ?

  • 資深大佬 : just1

    类似于 nextTick

  • 資深大佬 : misdake

    microtask 和 macrotask 的区别吧。promise 是 microtask 。setTimeout 是 macrotask,会在所有 promise 执行之后再执行。
    感觉原因应该是:界面变动都是通过 microtask 来实现的,setTimeout 的函数一旦运行就说明已全部执行完毕。

  • 資深大佬 : towave

    https://blog.towavephone.com/browser-working-principle-cycle-system/#webapi%EF%BC%9Asettimeout-%E6%98%AF%E6%80%8E%E4%B9%88%E5%AE%9E%E7%8E%B0%E7%9A%84

  • 資深大佬 : RexG

    @just1 @misdake 说的都对,就是这个操作

  • 資深大佬 : eason1874

    用途是防阻塞。
    浏览器是按顺序处理事件的,setTimeout 回调事件排在页面普通 JavaScript 代码后面,所以比较占时间的 JavaScript 可以放到 setTimeout 里面,等页面渲染好再去执行,防止阻塞导致白屏什么的。
    setTimeout 不是真正的定时任务,意思是最快在这个时间执行,慢的话,说不准。如果前面事件有阻塞一辈子,那一辈子也不会执行。

  • 資深大佬 : KouShuiYu

    估计是确保 DOM 已经更新

  • 資深大佬 : violetlai

    有些插件需要等 dom 更新 才搞这个

  • 資深大佬 : 2i2Re2PLMaDnghL

    我觉得取个名字清楚点
    const nexttick = () => new Promise((resolve) => setTimeout(resolve, 0));
    //…
    await nexttick()
    //…
    至于你的 warning,则是来源于 act(async () => {}) 这部分。但理论上来说这段中确实不包含任何 return,是不是返回了一个 Promise<undefined> 的原因?

  • 資深大佬 : wanguorui123

    添加到事件队列末尾下个周期调用

  • 資深大佬 : slime7

    我去抄 vuetify 的水波纹代码时也见过这个用法,用在添加水波纹动画的进入 class 上,我当时猜测是需要先设置一个初始样式,再用这个方式设置需要变形到的样式,这样才能产生 css 的 transition

  • 資深大佬 : Taikyo

    加入宏任务,只是为了不让它被立刻执行,可以在下一个 event loop 去执行。

  • 資深大佬 : xxz0315

    相当下一帧的意思

  • 主 資深大佬 : yazoox

    @2i2Re2PLMaDnghL
    有没有办法修改一下,消除这个警告?就按当前的用途

  • 資深大佬 : 2i2Re2PLMaDnghL

    @yazoox 简单地
    act(async()=>{…})
    转化为
    act(()=>{(async()=>{…})()})
    但其实没有任何意义,是这个 warning 本身有问题。
    我猜想这个 warning 的设置似乎是为了避免有人「想当然地」用 act callback 传递测试失败信号。
    为了绕过一个过于宽泛的 warning 这么做不好,你应当修正 warning 的提供者。
    看上去这个 warning 不是 react 提供的,在 react 代码中全文搜索 “must not return anything” 类似文字均在处理要求 effect 只能返回一个函数。

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具