研究大佬用 Vue 写的倒计时组件

传个参数就实现了功能的感觉真是太棒了。项目完成后，就膜拜了一下大佬的倒计时组件的代码。真是让我学到了不少。列举如下：

1. 计时器为什么要用setTimeout而不用setInterval
2. 为什么不直接将剩余时间-1。
3. 如何将所需要的时间返回出去（有可能我只需要分钟和秒数，那就只返回分钟和秒数，也有可能我全都要）。
4. 不确定接口返回的是剩余时间还是截止日期，该怎么同时兼容这两种情况。
5. 不确定接口返回的时间是秒还是毫秒单位。

好了，你可能不太理解这些问题，但是没关系，看完下面的解释，相信你会豁然开朗。

二、开始手操

1. 先创建一个vue组件

二、开始手操

1. 先创建一个vue组件

可以看到，getTime的目的就是获得 days，hours,mins，seconds，然后显示到html上，并且通过定时器实时来刷新days，hours,mins，seconds这个几个值。从而实现了倒计时。很简单，有木有？

durationFormatter是一个将duration转化成天数，小时，分钟，秒数的方法，很简单，可以看下它的具体实现。

durationFormatter(time) {  if (!time) return { ss: 0 };  let t = time;  const ss = t % 60;  t = (t - ss) / 60;  if (t < 1) return { ss };  const mm = t % 60;  t = (t - mm) / 60;  if (t < 1) return { mm, ss };  const hh = t % 24;  t = (t - hh) / 24;  if (t < 1) return { hh, mm, ss };  const dd = t;  return { dd, hh, mm, ss };},复制代码

好了，问题开始来了！！

3. 为什么要用setTimeout来模拟setInterval的行为？

这里用setInerval不是更方便吗？

setTimeout(function(){··· }, n); // n毫秒后执行function复制代码

setInterval(function(){··· }, n); // 每隔n毫秒执行一次function复制代码

可以看看setInterval有什么缺点：

再次强调，定时器指定的时间间隔，表示的是何时将定时器的代码添加到消息队列，而不是何时执行代码。所以真正何时执行代码的时间是不能保证的，取决于何时被主线程的事件循环取到，并执行。

setInterval(function, N)  //即：每隔N秒把function事件推到消息队列中复制代码