Максимальный размер стека вызовов превышен на рекурсивной функции SetTimeout (Javascript)

Question

У меня есть рекурсивная функция 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"); 
    } 
} 

Однако, когда фильтры займет много времени для загрузки, я получаю «неперехваченный RangeError: Максимальный размер стеки вызовов превышен (...)»

Как предотвратить это, и убедитесь, что он работает до завершения ?

Answer 1

Проблема здесь:

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

() Ввод после ссылки функции означает, что вы хотите, чтобы функция быть называется, сразу же, в тот момент в коде. То, что вы, вероятно, хотите, вместо того, чтобы что-то вроде:

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

, который

• передать функцию ссылки на setTimeout(), как это требуется, и
• убедитесь, что функция будет вызываться с соответствующим this (что делает .bind()).

Как только вы его получите, термин «рекурсивный «на самом деле не подходит. Да, функция ссылается сама на себя, когда она устраивает вызов после истечения таймера, но сама она не вызывает самого себя; он просит что-то еще (механизм таймера) называть его позже.