长按计数器开发：替换时间差为递增计数及负数值问题求助

嘿，我完全懂你遇到的坑——直接用getSeconds()或者getMilliseconds()计算差值确实会出问题，因为这俩方法只返回当前时间的局部片段值（比如秒是0-59，毫秒是0-999），一旦时间跨过整秒/整毫秒节点，后面的数值会重置，差值自然就变成负数了。比如你在59秒时开始计时，下一秒跳到0秒，那0 - 59肯定是负数对吧？

要实现你想要的count++式递增计数，根本不用纠结局部时间的差值，直接用时间戳的总差值来处理就好，这里有两种常见实现方式，你可以按需选：

方式一：固定间隔定时器（简单直观） #

如果想要每隔固定时长（比如1秒）让count加1，用setInterval最直接，代码逻辑一目了然：

(function(window, document, undefined){
  'use strict';
  
  var count = 0;
  var timer;
  var button = document.getElementById('button');
  var display = document.getElementById('display');

  // 监听长按开始
  button.addEventListener('mousedown', function() {
    count = 1;
    display.textContent = count;
    // 每1秒自动递增一次
    timer = setInterval(function() {
      count++;
      display.textContent = count;
    }, 1000);
  });

  // 监听长按结束（松开按钮或鼠标移出按钮）
  ['mouseup', 'mouseout'].forEach(function(eventType) {
    button.addEventListener(eventType, function() {
      clearInterval(timer);
      count = 0;
      display.textContent = '0';
    });
  });

})(window, document);

这种方式适合对精度要求不高的场景，缺点是定时器可能因为主线程阻塞有轻微延迟，但日常使用完全足够。

方式二：精确实时计数（基于实际长按时长） #

如果想要严格根据长按的实际时长更新count（比如长按1.2秒显示1，长按2.1秒显示2），用requestAnimationFrame结合时间戳差值更准确，还能彻底避免负数问题：

(function(window, document, undefined){
  'use strict';
  
  var startTimestamp;
  var count = 0;
  var rafId;
  var incrementInterval = 1000; // 每1秒递增一次，可自定义间隔
  var button = document.getElementById('button');
  var display = document.getElementById('display');

  button.addEventListener('mousedown', function() {
    startTimestamp = Date.now();
    updateCount();
  });

  function updateCount() {
    var currentTimestamp = Date.now();
    // 计算长按的总毫秒数（时间戳差值永远为正）
    var totalDuration = currentTimestamp - startTimestamp;
    // 根据总时长计算当前应显示的count（从1开始计数）
    var currentCount = Math.floor(totalDuration / incrementInterval) + 1;
    
    // 只有count变化时才更新显示，减少不必要的DOM操作
    if (currentCount !== count) {
      count = currentCount;
      display.textContent = count;
    }
    
    rafId = requestAnimationFrame(updateCount);
  }

  ['mouseup', 'mouseout'].forEach(function(eventType) {
    button.addEventListener(eventType, function() {
      cancelAnimationFrame(rafId);
      count = 0;
      display.textContent = '0';
    });
  });

})(window, document);

这里用Date.now()获取的是从1970年至今的总毫秒数，是持续递增的全局数值，所以差值永远是正数，完美解决了你之前遇到的负数问题，而且计数精度更高。

核心思路总结：别用时间的局部片段（秒、毫秒）算差值，用全局时间戳的总差值，就能彻底避开这个坑啦。

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