Question

当我按下按钮时，setInterval将起作用。如果我想在第一次按下按钮时停止setInterval命令，然后让第二个按钮像以前一样在setInterval中工作。我该怎么办？现在的问题是按下第一个按钮时。然后按第二个按钮以同时工作。

$("button").click(function() {
  var date = new Date();
  var time = date.toLocaleTimeString();
  var obj_name = $(this).attr('name');
  if (obj_name != undefined) {
  
    setInterval(function() {
      var date = new Date();
      var time = date.toLocaleTimeString();
      $.ajax({
        url: 'insert.php',
        method: 'POSt',
        data: {
          obj_name: obj_name,
          time: time
        }
      });
    }, 1000);
    
    $.ajax({
      url: 'insert.php',
      method: 'POSt',
      data: {
        obj_name: obj_name,
        time: time
      }
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button type="submit" name="sub-register">Register</button>
  <button name="cancel">Cancel</button>
</div>

Answer 1

将setInterval保存在全局属性中，例如：

var globalInterval = setInterval(function() {
   var date = new Date();
   var time = date.toLocaleTimeString();
   ....
   ....
}, 1000);

然后，您可以使用clearInterval(globalInterval)

取消间隔

但是为什么不将click事件分隔为两个独立的函数呢？submit按钮将触发setInterval并将其保存在全局变量中，而cancel将清除它，我认为它将使您更轻松地编写功能。

如果您决定坚持使用解决方案，则可以在

内设置时间间隔

if (obj_name != undefined)，并使用else语句将其清除。

Answer 2

您可以做的是使用clearInterval。让我为您举一个简单的例子。

<div>
    <button type="submit" id="RegisterButton" name="sub-register">Register</button>
    <button name="cancel" id="CancelButton">Cancel</button>
</div>

<script>
    var timer;
    $("#RegisterButton").on("click", function() {
       timer = setInterval(function() {
           //AJAX CALL
       },1000);
    });

    $("#CancelButton").on("click", function() {
      clearInterval(timer);
    });
</script>

单击注册按钮将启动间隔，单击取消按钮将清除间隔，计时器将停止。

祝你好运，玩得开心。

按下第二个按钮时第一次停止setInterval

2 个答案: