06. 定时器

Posted 2020-12-29 lhsaq2009

1. 定时器，javascript 是运行在单线程的环境中的，这就意味着定时器仅仅是计划代码在未来的某个时间执行，而具体执行时机是不能保证的。
   
1. 间隔循环
   
1. 开始：var timer = setInterval(函数名（不要带括号）/匿名函数，毫秒); 停止：clearInterval(timer);
1. 注意：在开启循环定时器时，务必先 clearInterval 一下，以避免同时开启过多的定时器，导致没法再关闭；
   

   1 2 3 4 5 6 7 8

   var timer=null;               //便于管理也为了进一步封装处理,建议把它放到运动对象的身上,aBtn.timer=null; var oBody=document.body; aBtn[0].onclick=function(){     clearInterval(timer);     //timer为null,undefined是不会报错的。     timer=setInterval(function(){         .....     },1000); }

   原因：如果不加上 clearInterval(timer); 当重复点击按钮，启动N多定时器，先前的定时器标识ID：timer 被覆盖掉，没法再去关闭；
   补充：timer 其实就是 setInterval 返回的一个数字而不是计时器本身，clearInterval(timer);时，即便timer 为null，underfined 顶多是找不到对应的定时器来关闭，并不会产生错误！
   强调：如果定时器在运行，你将手上的标识ID：timer回收，定时器不会停止也不会被回收。你甚至可以将标识ID：timer 抄在纸上再手工输入到 clearInterval,它仅仅只是一个数字。
2. 尽量不用 setInterval()
   
1. 无视代码错误，即对自己调用的代码是否报错这件事漠不关心。只知道无限调用.
2. 无视网络延迟，假设你每隔一段时间就通过Ajax轮询一次服务器，看看有没有新数据（ 建议使用 “补偿性轮询”（backoff polling）??? 2018-07-06 18:37:58）。
   而由于某些原因（服务器过载、临时断网、流量剧增、用户带宽受限，等等），你的请求要花的时间远比你想象的要长。但setInterval不在乎。
   它仍然会按定时持续不断地触发请求，最终你的客户端网络队列会塞满Ajax调用。
   
3. 不保证执行，与setTimeout不同，你并不能保证到了时间间隔，代码就准能执行。如果你调用的函数需要花很长时间才能完成，那某些调用会被直接忽略。
   
2. 延时执行
1. 开始：setTimeout（只执行一次）; 停止：clearTimeout

   var timer = setTimeout(function(num){},1000,fn1);    //第三个参数就 function 的回调参数

2. 第一个参数为字符串时，setTimeout("var s1 = 3",200);  // 定义了一个全局变量：s1
   
   
2. 运动注意问题(回头再整理)
1. 
   
2. 正负值 通过与目标距离来判断，移动正负。
3. 小技巧
   当形参传进来函数时，才执行。
   
4. 效果s
   
   
5. 抖动原理
1. 防止位移，重新触发定时器时，得初始位置。
6. 模拟时钟，因为页面每次刷新。定时器要等一段时间才执行。所以在模拟时钟时应该，在定时器后面 接着调用一个函数，再者 解决一下 个位数前面补0 的问题。
1. 如果是图片数字呢，就把图片名字与 数字挨个对应起来，放到数组里。得用到str.charAt(index);
2. 倒计时：
1. 未来时间点不变，当前时间在变