为什么 setInterval 和 clearInterval 在 JS 中不起作用？

Question

我是 JS 新手。

我有两张像下面这样的卡片，

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

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

卡片 1 中的 div content 应该像 Date.now() 一样显示动态值，而卡片 2 中的 content 应该显示静态值。

JS：

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

function allCardData() {
    var cards = document.getElementsByClassName("card");
    Array.prototype.forEach.call(cards, (card) => {
      cardData(card);
    });
  }

function mockData(card) {
  
   var setInt;

    function caseOne(card, callBackOne) {
      callBackOne(card);
    }

    function caseTwo(card, callBackTwo) {
      callBackTwo(card);
    }
    
    // SetInterval function
    function callBackOne(card) {
      setInt = setInterval(function () {
        var currentDate = Date.now();
        var val = String(currentDate).substr(8, 2);
      }, 1000);
    }
    //clearInterval
    function callBackTwo(card) {
      clearInterval(setInt);
    }
   
   
  switch(card) 
    {
     case "c1":
     return {
       target: card,
       value: caseOne(card, callBackOne)
     }
     case "c2":
     return {
       target: card,
       value: caseTwo(card, callBackTwo)
     }
     }
     }
     
   function Callback(value, callback) {
    callback(value);
    }
 
  function myCard(card) {
    Callback(mockData(card), function (data) {
      console.log(data);
      var target = document.getElementById(data.target);
      var content = target.getElementsByClassName('content')[0];
      content.innerHTML = data.value;
    });
  }
 
 
  //Onload function
 window.onload = function () {
 allCardData();
 };

我需要 card1 中的每 2 秒动态数据和 card2 中的 static data Which clears the dynamic value。

但是，它不起作用。

因为，回调函数需要return，当我将函数mockData传递给回调时。它没有按预期工作。

有人可以帮我to start the dynamic data in card1 and clear the data in card2.?

非常感谢。

Answer 1

这就是代码的作用：

• 为window.onload 调用allCardData()
• allCardData() 调用cardData() 为找到的每张卡片与卡片的ID
• cardData() 在中间步骤调用 myCard()
• myCard() 让Callback 打电话给mockData() 卡片
• mockData() 调用 caseOne() 获取卡 c1 和 caseTwo() 获取卡 c2
• caseOne() 设置 2 秒间隔
• caseTwo() 取消间隔

调用caseOne() 和caseTwo() 之间没有时间。他们被互相调用，中间没有时间。这意味着定时器在初始化后立即被取消。 2 秒计时器没有时间做任何事情。

将caseTwo() 更改为仅在特定条件过去后清除计时器的建议解决方案。否则间隔将永远不会开始。
您可能想google一下async/await，您可能需要更改其他部分的代码：

  async function caseTwo(card) {
    // asynchronously wait, stopping this function until the value is known
    var value = await getValueTwoFromSomewhere();
    
    clearInterval(setInt);
    return value;
  }

否则代码将需要重写为不同的东西。
也许您想重新考虑您的解决方案并将其作为另一个问题再次发布。