javascript - SetTimeout 递归函数超出最大调用堆栈大小 (Javascript)

Question

这个问题已经有答案了:

setTimeout calls function immediately instead of after delay (2 个回答)

已关闭 6 年前。

我有一个递归 SetTimeout 函数，可以在加载过滤器后单击页面上的过滤器(它们是通过 Ajax 加载的，因此在页面加载时无法立即使用)。

$scope.clickFilter = function () {
    var filter = $('.filter-item')
        .find('input[value="' + $scope.activeFilter + '"]');

    if (filter.length < 1) {
        setTimeout($scope.clickFilter(), 1000);
    } else {
        $(filter).trigger("click");
    }
}

但是，当过滤器需要很长时间才能加载时，我会收到“Uncaught RangeError:超出最大调用堆栈大小(…)”

如何防止这种情况并确保它运行直至完成？

Answer 1

问题出在这里:

  setTimeout($scope.clickFilter(), 1000); 

将 () 放在函数引用后面意味着您希望在代码中的该位置立即调用该函数。您可能想要的是这样的:

  setTimeout($scope.clickFilter.bind($scope), 1000);

这将

• 根据需要将函数引用传递给 setTimeout()，并且
• 确保使用正确的 this 值调用该函数(.bind() 部分的作用)

一旦你让它工作起来，术语“递归”就不太合适了。是的，函数在定时器到期后安排调用时正在引用自身，但它不是直接调用自身；它要求其他东西(计时器机制)稍后调用它。