js计时器+打字机效果demo

计时器

在写程序的过程中，经常会用到在某个指定的时间来执行一段代码，或者让一段代码在一个周期内执行。js中常用的计时器有timeout\interval；不是很常用的requestAnimationFrame，还有基本不会用到的Immediate；

setimmediate延时执行

var immediateID = setImmediate(func, [param1, param2, …]);
immediate的作用是在浏览器完全结束当前运行的操作之后立即执行指定的函数。然而通过下图可以看到immediate除了ie根本没人带他玩；该特性是非标准的，请尽量不要使用；知道有这么个东西就结了。

setTimeout()延时执行

在javascript程序中，除了函数是调用时才执行的代码外，所有代码都是在浏览器读取代码的时候立即执行的，但是setTimeout()方法可以延迟代码的执行
语法

 setTimeout(code,delay)//code：延迟执行的js代码，可以是程序调用//delay：code代码延迟执行的时间，单位是毫秒setTimeout("console.log('hello world')",5000);//延迟五秒弹出setTimeout("sayHello()",5000);function sayHello(){console.log("hello world");}

setInterval()周期性执行

setTimeout()方法可以让代码在一定的时间延迟执行，并不能让代码反复执行，如果要让代码反复执行，就必须要使用到setInterval方法
语法

 setInterval(code,interval)//code：要周期执行的js代码，可以使程序调用//interval：code代码执行的周期时间，单位是毫秒var i = 0;setInterval("console.log(i++)",1000);//周期性执行代码

requestAnimationFrame()请求动画帧

这个api通常只用在进行动画的绘制上，他将高速浏览器我将执行一次动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
绘制动画当然也可以使用其他的api，如timeout(fn(),34);但timeout的缺点是当你的web页被隐藏后，仍然在执行，而animationframe则在后台标签页或者隐藏时，会被暂停调用以提升性能。

语法

 window.requestAnimationFrame(callback);//callback  下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。

该回调函数会被传入DOMHighResTimeStamp参数，该参数与performance.now()的返回值相同，它表示requestAnimationFrame() 开始去执行回调函数的时刻。
返回值
animationframe的ID
例

 var start = null;var element = document.getElementById('Parameters');element.style.position = 'absolute';function step(timestamp) {if (!start) start = timestamp;var progress = timestamp - start;element.style.left = Math.min(progress / 10, 200) + 'px';if (progress < 2000) {window.requestAnimationFrame(step);}}window.requestAnimationFrame(step);

停止计时器

停止延迟执行代码clearTimeout()
clearTimeout()方法用以清除由setTimeout()方法创建的延时执行代码。
语法

 clearTimeout(id)//id：为setTimeout（）的返回值。var timeout1 = setTimeout("console.log(666)",10000);clearTimeout(timeout1);

停止周期性执行代码clearInterval()
clearInterval()方法可以清除由setInterval()方法创建的周期性执行代码
语法

 clearInterval(id)//id为setInterval()的返回值。var i=0;var stpjump=setInterval("alt()",1000);function alt(){console.log(i++);if(i>3){clearInterval(stpjump);}}

取消动画帧cancelAnimationFrame（）
取消一个先前通过调用requestAnimationFrame()方法添加到队列中的动画帧请求.
语法

 window.cancelAnimationFrame(requestID);

然而兼容性…emm…还是慎重使用吧。

当然这里列举的情况都是定义了计时器名称，直接找到清除的，对于未进行命名的也可以通过id来暴力清除，当然不建议这么做;

小程序中计时器的使用

使用中本质上没有任何的区别，但是要担心的一个问题是，慎用interval(),尽量使用timeout做递归，然后加个开关进行控制，我曾在开发中遇到过一个问题；在页面onhide周期中明明注销了计时器，然而再次在show周期中打印interval会发现上一个并没有被关闭，而且又另外创建了一个新的interval；因为做的是一个运动数据统计类mp,所以会有很多计时的需求，多页面跳转几次，甚至会吧小程序甚至微信进程卡崩溃。

打字机demo

最后放一个简单的打字机效果的demo

 var str1="打南边来了个吃葡萄不吐葡萄皮的喇嘛，打北边来了一群留恋榴莲甜哑巴，吃葡萄不吐葡萄皮的喇嘛提着五斤沓唛，留恋榴莲甜的哑巴一人拿一个喇叭";var i=0;function dzj(str){if(i<str.length){console.log(str.charAt(i));i++;}else{clearInterval(t);}}var t=setInterval("dzj(str1)",34);