js，多个计时器在完成后一个接一个显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js，多个计时器在完成后一个接一个显示相关的知识，希望对你有一定的参考价值。
大家好我想创建多个计时器。当第一个计时器超过秒时将开始，当第二个结束第三个将开始并结束，依此类推......我如何使用回调在javascript中实现它。我想在当前时间制作计时器，以便我将在任何窗口打开它，它将显示相同的结果。建议得到高度赞赏。
// 1st function start time
var countDownDate = new Date("Jan 6, 2018 11:42:00").getTime(); //datetimefinal
// function2 end time
var countDownDate1 = new Date("Jan 6, 2018 11:42:25").getTime(); //date time final
//function z is called from function y
var z = function() {
alert('zzz');
}
// function y is called from function x
var y = function() {
// Get todays date and time
var now = new Date().getTime(); // from now date
// Find the distance between now an the count down date
var distance = countDownDate1 - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
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="demo"
document.getElementById("demo12").innerhtml = days + "d " + hours + "h " +
minutes + "m " + seconds + "s ";
if (distance < 0) {
// clearInterval(y);
document.getElementById("demo12").innerHTML = "EXPIRED";
var sz = new z(); //here function z is calling
}
}
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime(); // from now date
// Find the distance between now an 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));
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="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h " +
minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
var s = new y(); //here function y is calling
}
}, 1000);<p id="demo"></p>
<p id="demo12"></p>
<p id="demo123"></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>答案
您可以使用函数中较少重复的实现来改进代码，而不是在函数中使用全局变量（将函数所需的每个值传递给函数）。
const repeat = time => fn => {
const t = setInterval(
()=>fn(t)
,time
);
};
const getDistance = date1 => date2 => {
const diff = date1-date2;
return [
Math.floor(diff / (1000 * 60 * 60 * 24)),
Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
Math.floor((diff % (1000 * 60)) / 1000),
diff
];
}
const setHtml = el=>html=>{
el.innerHTML = html;
};
const work = distanceFn => setHtmlFn => t => {
[days,hours,minutes,seconds,diff] = distanceFn(new Date().getTime());
if(diff<0){
setHtmlFn("EXPIRED");
clearInterval(t);//no longer call this function
}else{
setHtmlFn(`${days} d ${hours} h ${minutes} m ${seconds} s `);
}
}
repeat(1000)
(
work
(getDistance(new Date("Jan 6, 2018 11:42:25").getTime()))
(setHtml(document.getElementById("demo12")))
);
repeat(1000)
(
work
//3 days from now
(getDistance(new Date(new Date().getTime()+259200000).getTime()))
(setHtml(document.getElementById("demo")))
);<p id="demo"></p>
<p id="demo12"></p>
<p id="demo123"></p>以上是关于js，多个计时器在完成后一个接一个显示的主要内容，如果未能解决你的问题，请参考以下文章
在 TabLayout 和 ViewPager2 中执行异步任务后更新具有相同布局的多个片段