JS中setInterval与clearInterval无法正常生效要怎么解决？

核心问题排查 #

你的代码无法正常运行主要有以下几个问题：

• 遍历卡片节点时给mockData传入的是DOM元素本身，而非卡片的id值，导致switch分支完全匹配不到"c1"/"c2"的判断条件
• caseOne、caseTwo函数没有返回值，最终返回的data.value为undefined，无法渲染到页面上
• 定时器回调内仅计算了动态值，没有执行DOM更新操作，且定时器间隔设置为1000ms不符合2秒更新的需求
• 定时器变量是mockData的局部变量，处理c2时重新初始化的变量和c1的定时器完全无关联，无法执行清除操作
• 没有给c2配置静态返回值，渲染时无内容可展示

修复后完整代码 #

HTML代码 #

<div class = "card" id ="c1">
     <div class = "content"> </div>
</div>

<div class = "card" id ="c2">
     <div class = "content"> </div>
</div>

JS代码 #

// 把定时器变量提到外层作用域，保证c2可以访问到c1的定时器
let dynamicTimer = null;

function cardData(cardId) {
    myCard(cardId);
}

function allCardData() {
    var cards = document.getElementsByClassName("card");
    Array.prototype.forEach.call(cards, (card) => {
      // 传入卡片id而非DOM元素
      cardData(card.id);
    });
}

function mockData(cardId) {
    function caseOne(card, callBackOne) {
      callBackOne(card);
      // 返回初始动态值
      return String(Date.now()).substr(8, 2);
    }

    function caseTwo(card, callBackTwo) {
      callBackTwo(card);
      // 返回静态值，可自定义
      return "这是静态内容";
    }
    
    // SetInterval函数
    function callBackOne(card) {
      // 间隔设置为2000ms即2秒
      dynamicTimer = setInterval(function () {
        var currentDate = Date.now();
        var val = String(currentDate).substr(8, 2);
        // 直接更新c1的内容
        document.querySelector('#c1 .content').innerHTML = val;
      }, 2000);
    }
    //clearInterval
    function callBackTwo(card) {
      clearInterval(dynamicTimer);
    }
   
  switch(cardId) 
    {
     case "c1":
     return {
       target: cardId,
       value: caseOne(cardId, callBackOne)
     }
     case "c2":
     return {
       target: cardId,
       value: caseTwo(cardId, callBackTwo)
     }
     default:
     return {
       target: cardId,
       value: ''
     }
     }
}
     
function Callback(value, callback) {
  callback(value);
}
 
function myCard(cardId) {
  Callback(mockData(cardId), function (data) {
    var target = document.getElementById(data.target);
    var content = target.getElementsByClassName('content')[0];
    content.innerHTML = data.value;
  });
}
 
 
//Onload function
window.onload = function () {
  allCardData();
};

效果说明 #

• 页面加载后c1会立即显示初始时间戳截取值，之后每2秒自动更新一次
• c2加载后直接显示静态内容，同时会清除c1的定时器；如果需要c1保持持续更新，删除callBackTwo里的clearInterval逻辑即可

内容的提问来源于stack exchange，提问作者shada