javascript - setTimeout 不起作用

Question

我想在执行其他(可视化)脚本之前加载一个 OWL 文件。为此，我尝试了一切

$(document).ready

到

function visualize (file) {
if (!file)
    {setTimeout(visualize(file), 2000)}
else
    {jQuery(function($){visFeaturePool.init(file)})}}

我认为 setTimeout 必须可行，但它不起作用。我抛出错误: Uncaught RangeError: Maximum call stack size exceeded, 所以它不会等待，它只是调用可视化函数直到堆栈已满。

有人知道我做错了什么吗？ 谢谢!

Answer 1

代替

// #1
setTimeout(visualize(file), 2000);

你想要

// #2
setTimeout(function() {
    visualize(file);
}, 2000);

或者在现代浏览器上，您可以提供参数以在延迟后传递给函数:

// #3
setTimeout(visualize, 2000, file);

这三个解释:

1. (正如 SLaks 提到的那样)这会立即调用 visualize ，然后将其返回值传递给 setTimeout(因为 visualize 调用自身，它不断递归地调用自身，最终导致堆栈溢出错误。
2. 这将函数引用传递给 setTimeout，调用时将调用 visualize 并将其传递给 file 参数(其值为然后)。我们传递给 setTimeout 的函数将有权访问 file 参数，即使您的代码已经运行并返回，因为该函数是一个闭包 在创建它的上下文中，其中包括 file。更多:Closures are not complicated请注意，file 变量的值是在计时器 触发 时读取的，而不是在您设置它时读取的。
3. 这会将 visualize 函数引用传递给 setTimeout(注意我们没有 () 或 (file) 在它之后)并且还将 file 传递给 setTimeout，使用它在您设置调用时的值。稍后，在现代环境中，setTimeout 会在稍后调用时将其传递给该函数。

#2 和#3 之间有一个重要区别:对于#2，如果 file 在调用 setTimeout 和计时器到期之间发生更改，visualize 将看到 file 的新值。但是，对于#3，它不会。两者都有其用途。这是这种差异的示例:

let file = 1;

// #2, using "file" when the timer fires, not when you set it up
setTimeout(function() { visualize(file); }, 2000); // Shows 2

// #3, using "file" right away when setting up the timer
setTimeout(visualize, 2000, file); // Shows 1

file = 2;

function visualize(value) {
    console.log(value);
}

如果您需要 #3 在不支持 setTimeout 额外参数的环境中立即读取 file 的行为(而不是等到计时器触发)，您可以这样做:

// #4 (for environments that don't support #3)
setTimeout(visualize.bind(null, file), 2000);