Löschen eines Javascript-Intervalls

Question

Ich führe eine HTTP-Anfrage an eine Datei durch und abhängig von der Antwort, ob es "200" oder eine andere Antwort ist, wird eine Erfolgs- oder Fehlerfunktion ausgeführt. Diese Anfrage erfolgt jede Sekunde.

Das Problem, mit dem ich konfrontiert bin, ist, wenn ich viele Fehler Antworten bekommen sie alle zusammen laufen und der letzte hört nicht auf, z. Beende das Intervall, um ein neues zu beginnen.

Das rote Licht beginnt viel zu schnell zu blinken. Kann mir jemand helfen? Mein Code ist unten und ich spiele jetzt seit ein paar Stunden damit, aber ich kann nicht auf den Grund gehen.

var requestResponses = { 

    greenLight: $('.cp_trafficLight_Light--greenDimmed'), 
    redLight: $('.cp_trafficLight_Light--redDimmed'), 
    greenBright: 'cp_trafficLight_Light--greenBright', 
    redBright: 'cp_trafficLight_Light--redBright', 

    init: function (url) { 
     setInterval(function() { 
      requestResponses.getResponse(url); 
     }, 1000); 
    }, 

    successResponse: function() { 
     var redBright = requestResponses.redBright, 
      greenBright = requestResponses.greenBright; 
     requestResponses.errorCode = false; 
     requestResponses.redLight.removeClass(redBright); 
     requestResponses.greenLight.addClass(greenBright); 
    }, 

    errorResponse: function() { 
     requestResponses.runOnInterval(); 
    }, 

    runOnInterval: function() { 
     // clearInterval(runInterval); 
     var redBright = requestResponses.redBright, 
      greenBright = requestResponses.greenBright, 
      redLight = requestResponses.redLight; 
     requestResponses.greenLight.removeClass(greenBright); 
     var runInterval = setInterval(function() { 
      if (requestResponses.errorCode === true) { 
       redLight.toggleClass(redBright); 
      } 
     }, 400); 
    }, 

    getResponse: function (serverURL) { 
     $.ajax(serverURL, { 
      success: function() { 
       requestResponses.errorCode = false; 
       requestResponses.successResponse(); 
      }, 
      error: function() { 
       requestResponses.errorCode = true; 
       requestResponses.errorResponse(); 
      }, 
     }); 
    }, 

    errorCode: false 
} 

requestResponses.init('/status'); 

Schätzen Sie die Hilfe.

Answer 1

Javascript ist eine ereignisgesteuerte Sprache. Schleife nicht unendlich, um Dinge regelmäßig zu überprüfen. Es gibt Orte zu tun, aber die meiste Zeit, die eine Verzögerungsfunktion (setTimeout) wiederholt wiederholt, wenn benötigt oder einen Rückruf verwendend, wäre bessere Methode.

Mit setInterval mit Anfrage, was passiert, wenn Anfragen länger dauern als Ihr Intervall.

In Ihrem Fall haben Sie zwei Schleifen mit setInterval erstellt. Die erste ist die Anfrage, die alle 1 Sek. Ausgeführt wird. Statt setInterval zu verwenden, können Sie Ihren Code ausführen SetTimeout ändern erst nach Anforderung beendet und andere Aufgaben erledigen, kurz bevor die nächste Anforderung erneut ausgeführt wird:

function runRequest(...) { 
    $.ajax(serverURL, { 
     ... 
     complete: function() { 
      setTimeout(runRequest, 1000); 
     } 
     ... 
    }); 
} 

function lightsOnOff() { 

    var redBright = requestResponses.redBright, 
     greenBright = requestResponses.greenBright, 
     redLight = requestResponses.redLight; 

    requestResponses.greenLight.removeClass(greenBright); 
    if (requestResponses.errorCode === true) { 
     redLight.toggleClass(redBright); 
    } 

} 
setInterval(lightsOnOff, 400); 

Answer 2

Die setInterval() Methode wiederholt sich immer und immer wieder, nicht nur einmal. Ihr Fehlerbearbeitungshandler ruft dann die Routine auf, die ein anderes setInterval() erstellt, und so weiter. Bis Sie so viele Prozesse laufen haben, dass Sie das blinkende Rotlichtproblem bekommen.

Die Lösung besteht darin, nur die Logik aufzurufen, bei der der Aufruf setInterval() einmal erfolgt. Oder, noch besser, verwenden Sie setTimeout(), um die Routine aufzurufen. Es wird einmalig und wahrscheinlich besser für Ihren Gebrauch ausgeführt.