javascript - 如何避免异步事件处理程序顺序混乱

Question

在调用一些异步函数后，我很难找到一种方法来保证我拥有正确的数据。我有一个元素列表，每个元素都有一个异步 onclick 处理程序。我有一个滑块，当单击一个元素时会打开它并用一些数据异步填充。

const onClickElement = async () => {
    // open slider
    // await fetch data to display 
}

在滑块关闭时，我有一些异步功能可以从滑块中删除数据。

const onSliderClose = aync () => {
   // await async clear data 1
   // await async clear data 2
}

如果我单击关闭滑块，然后立即单击另一个元素以重新打开滑块，则在滑块 onSliderClose 处理程序完成之前获取新数据。关闭滑块功能恢复并清除所有先前获取的数据。我正在使用 react 和 redux 进行数据存储。谢谢！

标签： javascriptreactjsreduxasync-await

Answer 1

将 await 与异步一起使用！

const onClickElement = async () => {
    // open slider
    // fetch data to display 
await fetchData()
}

或替代

const onClickElement = async () => {
        // open slider
        // fetch data to display 

    }

    onClickElement.then( () => {
    //Do what you have to do here
    })