06. 定时器

定时器，JavaScript 是运行在单线程的环境中的，这就意味着定时器仅仅是计划代码在未来的某个时间执行，而具体执行时机是不能保证的。

间隔循环

开始：var timer = setInterval(函数名（不要带括号）/匿名函数，毫秒); 停止：clearInterval(timer);

注意：在开启循环定时器时，务必先 clearInterval 一下，以避免同时开启过多的定时器，导致没法再关闭；

 
              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,它仅仅只是一个数字。

尽量不用 setInterval()

无视代码错误，即对自己调用的代码是否报错这件事漠不关心。只知道无限调用.
无视网络延迟，假设你每隔一段时间就通过Ajax轮询一次服务器，看看有没有新数据（建议使用 “补偿性轮询”（backoff polling）??? 2018-07-06 18:37:58）。
而由于某些原因（服务器过载、临时断网、流量剧增、用户带宽受限，等等），你的请求要花的时间远比你想象的要长。但setInterval不在乎。
它仍然会按定时持续不断地触发请求，最终你的客户端网络队列会塞满Ajax调用。
不保证执行，与setTimeout不同，你并不能保证到了时间间隔，代码就准能执行。如果你调用的函数需要花很长时间才能完成，那某些调用会被直接忽略。

延时执行

开始：setTimeout（只执行一次）; 停止：clearTimeout

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

第一个参数为字符串时，setTimeout("var s1 = 3",200); // 定义了一个全局变量：s1

运动注意问题(回头再整理)

正负值通过与目标距离来判断，移动正负。
小技巧
当形参传进来函数时，才执行。
效果s
抖动原理

防止位移，重新触发定时器时，得初始位置。

模拟时钟，因为页面每次刷新。定时器要等一段时间才执行。所以在模拟时钟时应该，在定时器后面接着调用一个函数，再者解决一下个位数前面补0 的问题。

如果是图片数字呢，就把图片名字与数字挨个对应起来，放到数组里。得用到str.charAt(index);
倒计时：

未来时间点不变，当前时间在变

猜你喜欢