Question

我的Web应用程序中运行着一个异步功能，该功能可启用聊天输入。在另一个组件中，我需要为输入设置一个变量，然后在满足某些条件时将其聚焦到该变量上。不幸的是，当我尝试基于启用聊天功能的函数的异步特性对其进行声明时，聊天输入DOM元素并不总是可用。熟悉setTimeoout（）与调用堆栈的工作方式后，我将声明包装在setTimeout中，一切（似乎）现在都按预期工作。

所以我的问题是这是否是一种好习惯？我正在使用React / Redux，并且必须执行大量的prop线程和额外的逻辑才能在没有setTimeout的情况下完成看似简单的任务。

Answer 1

这是很好的做法；）

它可以完成工作，但是通常最好使用回调或Promise，而不是通过轮询来查看dom是否已准备好。使用“ setTimeout”方法的主要失败之处在于您正在设置计时器，并且资源（聊天插件）的加载时间比您设置的计时器花费的时间长。

// Run it
main();

// Supporting code
function main() {
    let attempts = 0;
    const maxAttempts = 10;
    tryUpdate();

    function tryUpdate() {
        // Call it once
        attempts++;
        const success = updateAndFocus();
        console.log(attempts);

        // Keep calling it every 100ms
        if (!success && attempts < maxAttempts) {
            setTimeout(() => tryUpdate(), 100);
        }
    }
}

function updateAndFocus() {
    const el = document.getElementById('findme');
    if (!el) return false;

    // do work
    el.focus;

    return true;
}

利用setTimeout更改调用堆栈的顺序

1 个答案: