JavaScript Stopwatch构造函数duration返回0及全局变量无变化问题

问题原因 #

你的代码存在两个核心问题：

• 你在构造函数中提前创建了Date实例d，这个实例的时间固定为秒表实例化的那一刻，后续调用start、stop方法时读取的都是同一个固定时间戳，两者差值自然为0。
• d没有使用var/let/const声明变量作用域，意外成为全局变量，存在被其他代码篡改的风险。

修复方案 #

你只需要在start触发时实时获取当前时间戳，stop触发时重新获取当前时间戳做差值计算即可，不需要提前缓存Date实例：

function Stopwatch() {
    var started = false;
    var elapsed = 0;
    var startTimestamp;

    this.duration = function() {
        if (started) {
            throw "Stopwatch is still running"
        } else {
            return elapsed;
        }
    }
    this.start = function() {
        if (started) {
            throw "Stopwatch has already started"; 
        } else {
            // 启动时获取当前时间戳
            startTimestamp = Date.now();
            started = true;
        }
    }
    this.stop = function() {
        if (!started) {
            throw "Stopwatch hasn't started";
        } else {
            // 停止时重新获取当前时间戳计算差值
            elapsed = Date.now() - startTimestamp;
            started = false;
        }
    }
    this.reset = function() {
        started = false;
        elapsed = 0;
    }
}
let sw = new Stopwatch();
sw.start();

setTimeout(function () {
    sw.stop();
    console.log(sw.duration());
}, 500);

如果你习惯用new Date().getTime()写法，直接替换代码中的Date.now()即可，两者效果完全一致。修复后代码运行输出值会在500上下浮动，符合秒表的预期逻辑。

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