Skip to content

waitValue

waitValue方法通常用于等待数据初始化完成或者完成某些变化,返回一个Promise对象。

描述

通过创建定时器,在固定频率下调用getter函数,直到函数取到值返回成功。 对于获取精准等待触发比较困难或复杂的情况,你可以尝试用这个方法代替。 虽然这种方式等待的过程无法绝对精准,但它的误差仍在可接受范围,对于网站用户来说,这种误差(小于100ms的延迟)通常不是很明显。

尝试一下

语法

javascript
waitValue(valueGetter)
waitValue(valueGetter, timeout)
waitValue(valueGetter, timeout, freq)

参数

valueGetter function(): boolean

  固定频率调用的取值函数。

timeout number

  一个整数,判定为等待超时的时间上限。非必填,默认值10000,单位ms

freq number

  一个整数,控制每隔多少秒执行一次函数。非必填,默认值100,单位ms

返回值

Promise<void>

valueGetter返回 真值 时 定时器销毁,返回Promise.resolve()
valueGetter返回 假值 时 继续执行取值函数,直到函数超时,返回Promise.reject()

示例

等待DOM加载完成

javascript
await waitValue(() => document.querySelector(`[uuid="${uuid}"] .drag-root`), 5000)
new Sortable(document.querySelector(`[uuid="${uuid}"] .drag-root`), option)

等待实例化完成

javascript
  await waitValue(() => editorRef.value, 3000)
  const imgArr = editorRef.value.getElemsByType('image')
  const text = editorRef.value.getText()

等待异步数据返回

javascript
await waitValue(() => formData?._taskRecords, 5000)
const res1 = formData._taskRecords?.filter(item => {
  if(item.result !== 2) return false
  return true
})

兼容性

依赖定时器API

纵然setTimeout与setInterval在浏览器和node环境下都被支持。 但定时器并不是ES本身的规范,它是依赖运行环境的。 如果你在web与node之外的JS环境(比如Adobe或者Office)运行这个方法,那么它很可能是无法工作的。