javascript - setInterval和clearInterval用法

问题描述

问 题

想要实现点击#timegoes区域，倒计时开始，再次点击此区域的时候，倒计时暂停。
这里我用的是setInterval和clearInterval，到底了还是没有成功，这是为什么？

$("#timegoes").click(function() {
  var timeNeedGo = $("#total .time").text();
  timeNeedGo = parseInt(timeNeedGo[0] + timeNeedGo[1]);
  var totalSec = timeNeedGo * 60;
  
  //如果t已经被赋值
  if (t) {
    console.log("if======"+t);
    //清除运行
    var t = clearInterval(t);
    //如果t没有被赋值，则进行赋值
  } else {
    console.log("esle======"+t);
    var t = setInterval(function() {
      totalSec--;
      var min = Math.floor(totalSec / 60);
      var sec = totalSec - (min * 60);
      min = min.toString();
      sec = sec.toString();
      sec.length < 2 ? sec = 0 + sec : sec;
      var text = min + ":" + sec;

      $("#timegoes .time").text(text);
    }, 1000);
    console.log("after====="+t);
  }
})

解决方案

var t;

$("#timegoes").click(function() {
  var timeNeedGo = $("#total .time").text();
  timeNeedGo = parseInt(timeNeedGo[0] + timeNeedGo[1]);
  var totalSec = timeNeedGo * 60;
  
  //如果t已经被赋值
  if (t) {
    console.log("if======"+t);
    //清除运行
    clearInterval(t);
    //如果t没有被赋值，则进行赋值
  } else {
    console.log("esle======"+t);
    t = setInterval(function() {
      totalSec--;
      var min = Math.floor(totalSec / 60);
      var sec = totalSec - (min * 60);
      min = min.toString();
      sec = sec.toString();
      sec.length < 2 ? sec = 0 + sec : sec;
      var text = min + ":" + sec;

      $("#timegoes .time").text(text);
    }, 1000);
    console.log("after====="+t);
  }
})

---

补充，不是你给变量命名为同一个名字他们就是同一个变量，那个名字只是给人看的，参见变量作用域：https://developer.mozilla.org...

这篇关于javascript - setInterval和clearInterval用法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！