如何在反应中停止递归 setTimeout 函数（clearTimeout 不起作用）？答案

【问题标题】：How to stop recursive setTimeout function in react (clearTimeout not working)?如何在反应中停止递归 setTimeout 函数（clearTimeout 不起作用）？
【发布时间】：2021-02-12 09:31:57
【问题描述】：

感谢您查看此内容。我正在使用递归进行 api 调用以检查任务状态更新。我上周实现了这个功能，它工作了吗？？不知道为什么它不再。不起作用的条件是如果状态为 FAILURE，它不会清除超时，但会进入条件....。超时在正确上下文中的函数外部声明。

export async function exponentialBackoff (checkStatus, task_id, timeout, max, delay, callback) {
    let status = await checkStatus(task_id);
    if (status === "SUCCESS") {
        callback();
    } else {
        if (status === "PENDING") {
            timeout = setTimeout(function() {
                return exponentialBackoff(checkStatus, task_id, timeout, --max, delay * 2, callback);
            }, delay);
        }  else if (status === "FAILURE" || max === 0){
            clearTimeout(timeout);
            return "FAILURE";
        }
    }
}

【问题讨论】：

如果您输入“FAILURE”条件但clearTimeout 不起作用，那么这一定意味着您没有提供正确的超时ID...或者比您意识到的更多开始了。您可以考虑使用以下内容清除它们：stackoverflow.com/questions/8860188/…。还可以考虑使用调试器和/或打印一些 console.log() 消息来说明问题。
非常感谢 window.clearTimeout 的方法。

标签： javascript reactjs recursion settimeout cleartimeout

【解决方案1】：

它看起来像一个回调地狱。我强烈建议您避免名称隐藏和覆盖参数。

另外 - 如果下一个超时被调用，我相信你不想保持前一个超时？

let timeoutInstance;

const clear = (tm) => {
   if (tm) clearTimeout(tm);
};

export async function exponentialBackoff (checkStatus, task_id, max, delay, callback) {
    let status = await checkStatus(task_id);
    if (status === "SUCCESS") {
        callback();
    } else {
        if (status === "PENDING") {
            clear(timeoutInstance);

            timeoutInstance = setTimeout(function() {
                return exponentialBackoff(checkStatus, task_id, --max, delay * 2, callback);
            }, delay);
        }  else if (status === "FAILURE" || max === 0){
            clear(timeoutInstance);

            return "FAILURE";
        }
    }
}

【讨论】：