一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。
掌控时间的奥义！可以用于css动效，可以提升性能，可以提升用户体验！
学习链接
调度：setTimeout 和 setInterval (javascript.info)
简介
需求：过一段时间再执行函数
- setTimeout - 过一段时间再执行 - 推荐（可按时间来）
- setInterval - 重复运行一个函数，间隔时间！- 不推荐（不按时间来。。。）
语法：
let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)
- 第一个参数，一个方法，一般用箭头函数！ () => {}
- 第二个，延迟
- 之后，可传入参数！
如何取消setTimeout？
- clearTimeout(timerId)
- 取消的是 用setTimeout定义的变量 （定时器标识符）
- 注：它取消了，但是该变量并没有消失！还可以继续用！
setInterval
- 看了其他案例
- setInterval挺好的！
- 做交互的时候，最好是用setTimeout，能精确定时！
- 如果让程序自己运行，每秒定时执行某个操作，setInterval，可以！
- 比如一个时钟动画，用setInterval，可以让指针自动跑，准确！
- Neu Times ! (codepen.io) - 案例地址 - 下文分析源码！
嵌套的setTimeout！
- 可以实现每隔一段时间完成任务 - 靠谱！
- 在第一参数 - 方法里面，用setTimeout继续调用该方法！
零延时的setTimeout
- 延时设置为 0
- 可以让里的函数更快执行
- 但是也得先等主程序先走完！！！才排到它
- 后续在补 宏任务 和微任务！
垃圾回收！
- 用setTimeout / setInterval创建的函数 - 第一个参数
- 会一直存在内存中！
- 直到它被clearInterval / clearTimeout！
- 如果该函数引用了外部变量 - 闭包！！！
- 那么该外部变量也不会消失！ - 可能占用更多的内存
使用的setTimeout - 最好要及时清理！！
实际案例！
在防抖、节流中，用到了setTimeout！
- 这部分内容在 装饰器模式和转发，call/apply (javascript.info)
- 还在学习中！
(Neu Times ! (codepen.io)) - 来自codepen的案例
作者 - Manan Tank
同时用到了setInterval和setTimeout！
主要逻辑！
- setInterval - 通过时间函数，获取当前的时，分，秒（数字）！每秒执行（1000ms）
- setInterval里面调用函数，用于获取数字，然后调用stripSlider！
- 函数stripSlider - 区分十位 和个位，修改整体的高度(Y轴)！
- 把十位 和个位传递给下一函数 - 增加放大样式！ - 需要去除放大样式！
- 调用函数highlight - 这里用到了setTimeout，用于去除放大样式！（950ms）
其他测试
- 把setTimeout修改成setInterval，出现时间对不上的情况，不可行！
- setTimout的参数源代码是 950ms 执行一次
- 修改成 50ms - 放大效果消失 - 执行太快。。
- 修改成 1900ms - 有多个放大效果
- 修改成 1000ms - 和setInterval的时间一致 - 只有当前在动的有放大效果
总结一下！
-
流程
-
- 获取时间 -
-
- 区分十位和个位数字 + 修改高度 -
-
- 添加放大样式 + 去除放大样式
-
时间 - setTimeout
-
a. 如果太快，就全去除了，没有添加（看不出来） - <
-
b. 如果太慢，就会有很多放大效果，来不及去除 - >
-
c. 如果和1000ms，相等，样式留不住，只有当前的才能有放大效果 - =
总结
靠谱，回收，案例！
最开始以为setInterval不靠谱，发现案例中用到的还挺多。。。嵌套的setInterval还是不准。。
setInterval用在，自动执行，不用交互的地方挺好！
setTimeout用在交互方面，比如防抖，节流，需要精确控制时间！
以上两种方法定义的函数，不会消失，如果不执行了，最好把它清除。
找的案例，感觉setInterval还不错！继续加油！
我始终相信，走过平湖烟雨，岁月山河，那些历尽劫数，尝遍百味的人，会更加生动且干净。
