寫一個 Javascript function 當 watch source 變為 truthy 時解析 promise

Question

我正在嘗試編寫一個 Javascript function 來觀察 javascript 表達式並等待它變為truthy ，然后它將解析 promise。問題是我when function 永遠不會解析 promise。

最后我想像這樣使用這個 function ：

let myNumber = 0

setInterval(() => {
    myNumber = myNumber + 1
}, 1000)

when(myNumber === 4).then(() => {
    console.log('My number is 4!!')
})

這是我的when() function：

window['when'] = (watchSource: boolean): Promise<any> => {
    return new Promise(resolve => {
        let interval

        interval = setInterval(() => {
            console.log(watchSource) // <--- always false

            if (watchSource === true) {
                clearInterval(interval)
                resolve()
            }
        }, 100)
    })
}

Answer 1

when(myNumber === 4).then(() => {
    console.log('My number is 4!!')
})

這個問題是當調用when()時myNumber === 4被評估為false ，因此false然后被分配給watchSource 。 由於永遠不會再次調用when() ，因此永遠不會提供watchSource的新值並且它保持為false 。

---

解決此問題的（許多）方法之一是將 watchSource 設置為 function。這使您可以在每次要檢查時重新執行條件。

window['when'] = (watchSource: () => boolean): Promise<any> => {
    return new Promise(resolve => {
        let interval

        interval = setInterval(() => {
            console.log(watchSource()) // <--- always false

            if (watchSource() === true) {
                clearInterval(interval)
                resolve()
            }
        }, 100)
    })
}

然后：

when(() => myNumber === 4).then(() => {
    console.log('My number is 4!!')
})

操場

Answer 2

when()在整個應用程序中只被調用一次，除非您在其他地方再次調用它。 因此，更適合您的情況的邏輯是：

let myNumber = 0

const interval = setInterval(() => {
    myNumber = myNumber + 1
    if (myNumber === 4) {
        clearInterval(interval);
    }
}, 1000)

如果您想實現某種“監視”處理程序，我建議您改用Proxy 。