这篇文章给大家介绍JavaScript中高级定时器的原理是什么,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies,包括创建和修改等。7、基于Node.js技术进行服务器端编程。
重复定时器
通常,我们使用setInterval方法来以相同时间间隔重复执行某段代码。但是使用该方法会有两个问题:第一个就是某些间隔会被跳过;第二个就是多个定时器的代码执行之间的间隔可能会比预期的小。
在这里,我们来举个例子:如果某个onclick事件处理程序使用setInterval
设置了一个200ms间隔的重复定时器,如果事件处理程序花了300ms的时间完成,就会跳过一个时间间隔同时运行着一个定时器代码。
我们也可以通过下面的代码来得到结论:
//重复定时器 var i =0; setInterval(function(){ //如果事件处理时间长于间隔时间 i++; for(var j=0;j<100000000;j++){} document.write(i+' '); },100); //可以明显感觉到时间间隔不相等
为了避免这种时间间隔的问题,我们可以采用链式调用setTimeout
方法来取代setInterval
。
//可以采用链式调用setTimeout来取代setInterval var i = 0; setTimeout(function(){ //处理内容 i++; for(var j=0;j<100000000;j++){} document.write(i+' '); // setTimeout(arguments.callee,100); },100); //这样处理效果明显好多了。
每次函数执行的时候都会创建一个新的定时器,第二个setTimeout
调用使用了arguments.callee
来获取对当前执行的函数的引用,并为其设置另外一个定时器。这样做是为了在前一个定时器代码执行完之前,不会向队列插入新的定时器代码,确保不会有任何缺失的间隔,也保证了在下一次定时器代码执行之前,至少要等待指定的间隔,避免了连续的运行。可谓一举两得,现在主流框架中的动画一般都是这样来实现重复定时的。
函数节流
定时器不仅仅是用来定时的,也可以用来缓解浏览器的压力。浏览器中某些计算和处理要比其他的昂贵很多,比如说DOM操作,就会需要更多的内存和CPU时间,连续使用过多的DOM操作可能会导致浏览器挂起,甚至崩溃。
函数节流的基本思想就是,某些代码不可以在没有间断的情况连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置一个。目的就是为了在执行函数的请求停止一段时间后再执行。
代码如下:
//再来谈谈函数节流 function throttle(method,context){ clearTimeout(method.tId); method.tId = setTimeout(function(){ method.call(context); },100); } //该函数接受两个参数,第一个是要执行的函数,第二个是作用域。 //使用方法demo //未使用情况: window.onresize = function(){ var div = document.getElementByTagName(body); div.style.height = div.offsetWidth +'px'; } //使用情况; function resizeDiv(){ var div = document.getElementByTagName(body); div.style.height = div.offsetWidth +'px'; } window.onresize = function(){ throttle(resizeDiv); }; //只要代码是周期性执行的,都应该使用节流。
这样给用户的感觉并不会很大,确是给浏览器减少了不少的压力。函数节流也是很多框架常用的技巧之一。
demo示例:
//重复定时器 /*var i =0; setInterval(function(){ //如果事件处理时间长于间隔时间 i++; for(var j=0;j<100000000;j++){} document.write(i+' '); },100);*/ //可以明显感觉到时间间隔不相等 //可以采用链式调用setTimeout来取代setInterval /*var i = 0; setTimeout(function(){ //处理内容 i++; for(var j=0;j<100000000;j++){} document.write(i+' '); // setTimeout(arguments.callee,100); },100);*/ //这样处理效果明显好多了。 //以上就是重复定时器 //再来谈谈函数节流 function throttle(method,context){ clearTimeout(method.tId); method.tId = setTimeout(function(){ method.call(context); },100); } //该函数接受两个参数,第一个是要执行的函数,第二个是作用域。 //使用方法demo //未使用情况: window.onresize = function(){ var div = document.getElementByTagName(body); div.style.height = div.offsetWidth +'px'; } //使用情况; function resizeDiv(){ var div = document.getElementByTagName(body); div.style.height = div.offsetWidth +'px'; } window.onresize = function(){ throttle(resizeDiv); }; //只要代码是周期性执行的,都应该使用节流。
关于JavaScript中高级定时器的原理是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。