javascript - setTimeout 不会停止

Question

我正在尝试制作一个具有以下目标的脚本:

1. 每X秒检查一次是否有新订单(函数refreshIntervalId())
2. 如果有新订单，则停止setTimeover
3. 在另一个函数(函数refreshIntervalId2())中执行一些操作并再次启动setTimeover

我用这段代码实现了这一点，它可以工作，但计时器永远不会停止，并且每 5 秒就会执行一次。

你知道我该如何解决这个问题吗？提前致谢

  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

这是因为 refreshIntervalId 和 refreshIntervalId2 不是对计时器的引用，而是对包含方法 update 的对象的引用，我认为该方法是命名空间的目的。

clearInterval 需要一个计时器作为参数，并且可以从 setInterval 调用的返回值中获取这些计时器。

您必须满足这种形式的代码才能引用您的计时器以供将来清算:

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

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

像这样的结构就足够了:

$(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);
});

<小时/>

顺便说一句，您的 keypress 处理程序应该位于 $(document).ready() 中，以确保 DOM 元素在操作之前已加载。