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)运行这个方法,那么它很可能是无法工作的。