Javascript 不同日期显示相同的倒计时值

鉴于此HTML：

<span class="countdown-date" data-countdown-date="2020-08-31 18:00:00"></span>

<span class="countdown-date" data-countdown-date="2020-12-31 00:00:00"></span>

问题是两个倒计时日期都显示相同的值

如下所示：136d 1h 56m 26s（加载页面时的初始值）

任何帮助都将不胜感激

---

JS代码的来源：。

需要在interval函数中声明countDownDate

当它在外部声明时，变量将被覆盖

document.addEventListener（'DOMContentLoaded'，函数（）{
var list=document.getElementsByClassName（'countdown-date'）；
对于（列表中的项目）{
//log（item.getAttribute（“数据倒计时日期”）；
//显示2020-08-31 18:00:00和2020-12-31 00:00:00。
//console.log（倒计时）；
//显示159886080000和1609333200000
//每1秒更新一次倒计时
var x=设置间隔（函数（）{
//确定我们倒计时的日期
var countDownDate=新日期（item.getAttribute（“数据倒计时日期”）.getTime（）；
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在；
//天、小时、分钟和秒的时间计算
变量天数=数学楼层（距离/（1000*60*60*24））；
//控制台日志（天）；
var小时=数学楼层(
（距离%（1000*60*60*24））/（1000*60*60）
);
var分钟=数学地板(
（距离%（1000*60*60））/（1000*60）
);
var秒=数学楼层（（距离%（1000*60））/1000）；
//在id为“倒计时日期”的元素中显示结果
item.innerHTML=
天+小时+小时+分钟+米+秒+秒；
//如果倒计时结束，写一些文字
如果（距离<0）{
净间隔（x）；
item.innerHTML='过期'；
}
}, 1000);
};
});

文档。addEventListener（'DOMContentLoaded'，函数（）{
var list=document.getElementsByClassName（'countdown-date'）；
函数processdate（倒计时日期，项）{
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在；
//天、小时、分钟和秒的时间计算
变量天数=数学楼层（距离/（1000*60*60*24））；
//控制台日志（天）；
var小时=数学楼层(
（距离%（1000*60*60*24））/（1000*60*60）
);
var分钟=数学地板(
（距离%（1000*60*60））/（1000*60）
);
var秒=数学楼层（（距离%（1000*60））/1000）；
//在项目中显示结果
item.innerHTML=
天+小时+小时+分钟+米+秒+秒；
//如果倒计时结束，写一些文字
如果（距离<0）{
净间隔（x）；
item.innerHTML='过期'；
}
}
对于（列表中的项目）{
//确定我们倒计时的日期
var countDownDate=新日期（item.getAttribute（“数据倒计时日期”）.getTime（）；
//每1秒更新一次倒计时
var x=设置间隔（processdate，1000，countDownDate，item）；
}
});
谢谢安德鲁。虽然这样做有效，但我发现了一种更好的方法，通过将日期处理逻辑放在命名函数中而不是匿名函数中，来避免每秒获取静态数据属性值。
document.addEventListener('DOMContentLoaded', function () {
    var list = document.getElementsByClassName('countdown-date');

    for (let item of list) {
        // console.log(item.getAttribute("data-countdown-date"));
        // shows 2020-08-31 18:00:00 and 2020-12-31 00:00:00.

        // Set the date we're counting down to
        var countDownDate = new Date(item.getAttribute("data-countdown-date")).getTime();
        
        // console.log(countDownDate);
        // shows 1598860800000 and 1609333200000

        // Update the count down every 1 second
        var x = setInterval(function () {
            // Get todays date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            // console.log(days);

            var hours = Math.floor(
                (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
            );
            var minutes = Math.floor(
                (distance % (1000 * 60 * 60)) / (1000 * 60)
            );
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Display the result in the element with id="countdown-date"
            item.innerHTML =
                days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's ';

            // If the count down is finished, write some text
            if (distance < 0) {
                clearInterval(x);
                item.innerHTML = 'EXPIRED';
            }
        }, 1000);
    };
});


document.addEventListener('DOMContentLoaded', function () {
    var list = document.getElementsByClassName('countdown-date');

    function processdate(countDownDate, item) {
        // Get todays date and time
        var now = new Date().getTime();

        // Find the distance between now and the count down date
        var distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        // console.log(days);

        var hours = Math.floor(
            (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        );
        var minutes = Math.floor(
            (distance % (1000 * 60 * 60)) / (1000 * 60)
        );
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Display the result in the item
        item.innerHTML =
            days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's ';

        // If the count down is finished, write some text
        if (distance < 0) {
            clearInterval(x);
            item.innerHTML = 'EXPIRED';
        }
    }

    for (let item of list) {
        // Set the date we're counting down to
        var countDownDate = new Date(item.getAttribute("data-countdown-date")).getTime();

        // Update the count down every 1 second
        var x = setInterval(processdate, 1000, countDownDate, item);
    }
});