如何重置和启动 setTimeout()

Question

多亏了在线帮助，我制作了一个 RT web 应用程序，现在我只完成了一个运行不佳的部分。 当 function 每秒调用一次并有新数据时，文本的颜色应为“红色”，三秒后应返回相同的颜色。 如果值没有每秒都在变化，那么它是有效的，但是当值在变化时，事情就不能正常工作了。 值的颜色变为黑色，然后变为红色。 它没有保持相同的价值。 实时更新有效，唯一的问题是每秒都有新数据时颜色不保持相同的颜色。

<script>
  setInterval(function() {
      fetch('/data_json').then(
        response => response.json()
      ).then(
        data =>
          data.forEach(match =>
            updateElement(match)
          )            
      )
    }, 1000
  );

function updateElement(match) {
    Object.entries(match).forEach(([k,v]) => {
      if(document.getElementById(k + '_' + match.id) != null){
        element = document.getElementById(k + '_' + match.id);
        previousValue = element.innerHTML;           
        // If Previous value is not equal to the new value, change it!
        if (previousValue !== v.toString()) {
            blinkUpdate(element, v.toString())
        }
      }                
                 
    })
}

function blinkUpdate(element, newValue, newColor='#FF2400') {

    previousColor = element.style.color;
    var start_Time=null;
    element.innerHTML = newValue;
    element.style.color = newColor; 
    if(newColor==previousColor){
      clearTimeout(start_Time)
    }else{
        // Set back to original color after timeout ms
      start_Time=setTimeout(() => {
        element.style.color = '#000000'
      }, 3000)
    }     
    
}
</script>

那么问题来了，当function有新的呼叫时，如何重置定时器呢？ 新的呼叫应该重置超时。 颜色应该保持不变。

Answer 1

主要问题是您将start_Time计时器引用存储在 function 中。下次 function 运行时该引用将消失，因此当您执行clearTimeout时，它根本不会清除任何内容。

有一种完全不同的方法来实现这个可能会更好——但我不想让你出轨，或者……

您可以将计时器存储在 map 中，并与 function 外部字段的 ID 相对应，并在其中引用它们。 这样你就有了一个计时器存储，每个计时器都根据元素的 id 存储。 因此，在间隔的每个“滴答声”之间，您可以参考要取消的确切计时器。

我还认为，当新数据在红色时到达时，您可能只希望它重置 3 秒？ 所以它应该清除它并重新设置它。

<script>
  setInterval(function() {
      fetch('/data_json').then(
        response => response.json()
      ).then(
        data =>
          data.forEach(match =>
            updateElement(match)
          )            
      )
    }, 1000
  );

function updateElement(match) {
    Object.entries(match).forEach(([k,v]) => {
      if(document.getElementById(k + '_' + match.id) != null){
        element = document.getElementById(k + '_' + match.id);
        previousValue = element.innerHTML;           
        // If Previous value is not equal to the new value, change it!
        if (previousValue !== v.toString()) {
            blinkUpdate(element, v.toString())
        }
      }                
                 
    })
}


const timers = {}
function blinkUpdate(element, newValue, newColor='#FF2400') {

    previousColor = element.style.color;
    var start_Time=null;
    element.innerHTML = newValue;
    element.style.color = newColor; 
    if(timers[element.id] && previousColor !== newColor){
        clearTimeout(timers[element.id])
    }

      // Set back to original color after timeout ms
      timers[element.id] = setTimeout(() => {
        element.style.color = '#000000'
        delete timers[element.id]
      }, 3000)     
    
}
</script>