时间戳

首页 > 解决方案 > 为什么 setInterval 和 clearInterval 在 JS 中不起作用？

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

问题描述

我是 JS 新手。

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

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

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

卡片 1 中的 divcontent应该显示动态值，而卡片 2 中Date.now()的divcontent应该显示静态值。

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和card2中每2S需要一个动态数据。static data Which clears the dynamic value

但是，它不起作用。

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

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

非常感谢。

标签： javascripthtml

解决方案

这就是代码的作用：

  • 呼吁allCardData()_window.onload
  • allCardData()使用卡的 ID调用cardData()找到的每张卡
  • cardData()myCard()在中间步骤中调用
  • myCard()打电话Callback要mockData()卡
  • mockData()调用caseOne()卡 c1 和caseTwo()卡 c2
  • caseOne()设置 2 秒间隔
  • caseTwo()取消间隔

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

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

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

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

推荐阅读