Javascript Intervalをクリアする

Question

私はファイルへのHTTPリクエストを実行しており、レスポンスに応じて "200"か別の応答かどうかに応じて成功またはエラー機能が実行されます。この要求は毎秒行われます。

私が直面している問題は、すべてが一緒に実行され、最後のものが停止しないなど、多くのエラー応答が発生した場合です。間隔を終了して新しい間隔を開始します。

赤色のライトが速すぎます。誰でも私を助けることができますか？私のコードは以下の通りですが、私は数時間それを使って遊んでいますが、その底には足りないようです。

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'); 

ヘルプを評価してください。

Answer 1

Javascriptはイベント駆動型の言語です。物事を定期的にチェックするために無限にループしないでください。そのような場所はありますが、必要なときに遅延関数（setTimeout）を繰り返し呼び出すか、コールバックを使用する方が良い方法になります。

リクエストでsetIntervalを使用すると、リクエストがインターバルより長くかかり始めるとどうなるか考えてください。

あなたのケースでは、setIntervalで作成された2つのループがあります。最初は1秒ごとに実行されるリクエストです。代わりのsetIntervalを使用しての、あなただけのリクエストが終了した後のsetTimeoutを実行するようにコードを修正し、次の要求を再実行する直前に他のタスクを行うことができますしません

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

setInterval()の方法は、1回だけ繰り返されるのではありません。エラー応答ハンドラは、別のsetInterval()などを作成するルーチンを呼び出します。非常に多くのプロセスが実行されるまで、赤色の点滅の問題が発生します。

解決策は、setInterval()コールが1回行われるロジックだけを呼び出すことです。あるいは、setTimeout（）を使ってルーチンを呼び出すこともできます。それは一度だけ実行され、あなたの使用のためにより良いでしょう。