setTimeout doesn´t stop

Question

I´m trying to make a script with this goals:

1. Check every X seconds if there is a new order ( function refreshIntervalId() )
2. if there is a new order, stop the setTimeover
3. perform some actions in another function ( function refreshIntervalId2() ) and start de setTimeover again

I achieve that with this code, it works but the timer never stops and it keeps executing every 5 seconds.

Do you know how can I solve this? Thanks in advance

  var refreshIntervalId, refreshIntervalId2;

  $("input:text:visible:first").focus();

  refreshIntervalId2 = (function() {
    return {
      update: function() {
        var pedidoid, url;
        clearInterval(refreshIntervalId);
        pedidoid = $("#pedidoid").val();
        url = Routing.generate("get_pedido", {
          id: pedidoid
        });
        return $.getJSON(url, function(json) {
          clearInterval(refreshIntervalId2);
          if (json.entregado === 1) {
            return location.reload(true);
          }
        });
      }
    };
  })();

  refreshIntervalId = (function() {
    return {
      update: function() {
        var url;
        url = Routing.generate("get_pedidos");
        return $.getJSON(url, function(json) {
          var imgsrc;
          clearInterval(refreshIntervalId);
          $(".hero-unit").children("h1").text("Pedido nuevo!");
          $(".hero-unit").children("h2").text("");
          imgsrc = "/images/uploads/" + json.pedido.material.foto;
          $("#imagenpedidomaterial").attr("src", imgsrc);
          $(".cajapuesto").css({
            position: "absolute",
            top: json.pedido.puesto.y + "px",
            left: json.pedido.puesto.x + "px"
          });
          $(".cajapuesto").addClass(json.kolorea);
          $("#divimagenmaterial").show("slow");
          $("#divcodbar").show("slow");
          $("#pedidoid").val(json.pedido.id);
          return setInterval(refreshIntervalId2.update, 5000);
        });
      }
    };
  })();

  $(document).ready(function() {
    return setInterval(refreshIntervalId.update, 5000);
  });

  $(document.body).on("keypress", function(e) {
    var $micodbar, url;
    switch (e.which) {
      case 13:
        $("#divmaterialincorrecto").hide();
        $micodbar = $("#checkcodbar").val();
        url = Routing.generate("get_material", {
          codbar: $micodbar
        });
        return $.ajax(url, {
          type: "GET",
          contentType: "application/json",
          success: function(data) {
            var datos;
            if (data === "null") {
              return $("#divmaterialincorrecto").show("slow");
            } else {
              datos = jQuery.parseJSON(data);
              return $(".row").show("slow");
            }
          },
          error: function(xhr, ajaxOptions, thrownError) {
            console.log("Errorea");
            alert(xhr.status);
            return alert(thrownError);
          }
        });
    }
  });

Answer 1

It's because refreshIntervalId and refreshIntervalId2 are NOT references to your timers, but are references to objects that contain a method update which I suppose are namespaces in purpose.

clearInterval needs a timer as an argument and these can be acquired from the return value of a setInterval call.

You must satisfy this form of code in order to reference your timers for future clearing:

//myTimer is a reference to your timer created by setInterval.
var myTimer = setInterval(func,interval);

//to clear myTimer, pass it to clearInterval
clearInterval(myTimer);

Something like this structure should suffice:

$(document).ready(function() {
  var firstInterval
    , secondInterval
    ;

  //if you are not creating local scopes, I suggest ditching the IFFE
  //and go for a literal object instead.
  var refreshIntervalId = {
    update : function(){
      ...
      return $.getJSON(url, function(json) {
        ...
        clearInterval(firstInterval);
        ...
      });
      ...
    }
  };

  //run refreshIntervalId.update every 5 seconds
  //timer referenced by firstInterval
  firstInterval = setInterval(refreshIntervalId.update, 5000);
});

---

Just an aside, your keypress handler should be in $(document).ready() to make sure DOM elements are loaded before they are operated on.