Die maximale Callstack-Größe wurde bei der rekursiven Funktion SetTimeout überschritten (Javascript)

Question

Ich habe eine rekursive SetTimeout-Funktion, die auf einen Filter auf meiner Seite klickt, nachdem die Filter geladen wurden (sie werden über Ajax geladen und sind beim Laden der Seite nicht verfügbar).

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

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

Wenn jedoch die Filter eine lange Zeit dauern zu laden, erhalte ich „Uncaught Auslöser Range: Maximale Call-Stack-Größe überschritten (...)“

Wie verhindere ich dies und stellen Sie sicher, es läuft bis zum Abschluss ?

Answer 1

Das Problem ist hier:

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

() nach der Funktionsreferenz Einlochen bedeutet, dass Sie die Funktion wollen genannt werden, sofort an dieser Stelle im Code. Was Sie wahrscheinlich stattdessen wollen, ist so etwas wie:

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

die

• eine Funktion Verweis auf setTimeout() passieren wird, wie dies erforderlich ist, und
• sicherzustellen, dass die Funktion mit dem richtigen this aufgerufen werden Wert (was der .bind() Teil tut)

Sobald Sie es arbeiten, der Begriff „rekursiven "ist nicht wirklich angemessen. Ja, die Funktion referenziert sich selbst, wenn sie nach Ablauf des Timers den Anruf anordnet, aber sie ruft sich nicht direkt an; es fragt etwas anderes (den Timer-Mechanismus), um es später aufzurufen.