js高级技巧之高级定时器
2015-10-04 13:55
633 查看
实际上,浏览器负责进行排序,指派某段代码在某个时间点运行的优先级。
可以吧js想象成在时间线上运行的。
JavaScript中没有任何代码是立刻执行的,但一旦进程空闲则尽快执行。
1.重复的定时器:
setInterval()的重复定时器存在两个缺点:
(1)某些间隔会被跳过
(2)多个定时器的代码执行之间的间隔可能比预期的小;
假设,某个onclick事件处理程序使用setInterval()设置了一个200ms间隔的重复定时器。如果事件处理程序花了300ms多一点的时间完成,同时定时器代码也花了差不多的时间,就会同时出现跳过间隔且连续运行定时器代码的情况。
为了避免这个缺点,可以使用链式setTimeout()调用。
callee是arguments的一个属性,指的是对函数对象本身的引用。
2.Yielding Processes
运行在浏览器中的JavaScript都被分配了一个确定数量的资源。
脚本长时间运行的问题通常是由两个原因之一造成的:
(1)过长的、过深嵌套的函数调用。
(2)进行大量处理的循环。
process要花100ms,那么总的花费时间是由数组的长度决定的。JavaScript的执行是一个阻塞操作,脚本运行花费的时间越久,用户无法与页面交互的时间也越久。
解决这个问题有一种技术叫做:数组分块
小块小块地处理数组,通常每次一小块。
基本的思路是为要处理的项目创建一个小队列,然后使用计时器取出下一个要处理的项目进行处理,接着再设置另一个定时器。
chunk方法接收三个参数:要处理的项目的数组,用于处理项目的函数,运行该函数的环境。这个函数用来处理数组。
调用chunk时,为了不改变数组原来的值,用到了一个concat方法:(返回一个新的数组,此方法里面可以添加参数。这些参数和调用的数组组成一个新的数组。)。由于printValue函数处在全局作用域内,因此无需给chunk()传递一个context对象。
3.函数节流:
函数节流的思想是:某些代码不可以在没有间断的情况下连续重复执行。
第一次调用函数,创建一个定时器,在指定的时间间隔后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。
throtttle函数用来进行函数节流:这个函数首先清除之前设置的定时器。然后定义定时器,在100ms后再执行method方法(method.call(context)是为了确保方法在适当的环境中执行)。如果这个throttle在100ms内执行了50次,那么method方法也只会执行一次。(这就是节流)
window.onresize方法会造成浏览器运行缓慢的两个原因:
(1)首先,要计算offsetWidth属性,如果该元素或者页面上其他元素有非常复杂的css样式,那么整个过程将会很复杂。
(2)其次,设置某个元素的高度需要对页面进行回流来令改动生效。如果页面有很多元素同时应用了相当数量的css的话,这个又需要很多的计算。
只要代码是周期性执行的,都应该使用节流,但是你不能控制请求的执行的效率。可以改动throttle函数的时间间隔。
可以吧js想象成在时间线上运行的。
JavaScript中没有任何代码是立刻执行的,但一旦进程空闲则尽快执行。
1.重复的定时器:
setInterval()的重复定时器存在两个缺点:
(1)某些间隔会被跳过
(2)多个定时器的代码执行之间的间隔可能比预期的小;
假设,某个onclick事件处理程序使用setInterval()设置了一个200ms间隔的重复定时器。如果事件处理程序花了300ms多一点的时间完成,同时定时器代码也花了差不多的时间,就会同时出现跳过间隔且连续运行定时器代码的情况。
为了避免这个缺点,可以使用链式setTimeout()调用。
setTimeout(function() { setTimeout(arguments.callee, interval); },interval)
callee是arguments的一个属性,指的是对函数对象本身的引用。
2.Yielding Processes
运行在浏览器中的JavaScript都被分配了一个确定数量的资源。
脚本长时间运行的问题通常是由两个原因之一造成的:
(1)过长的、过深嵌套的函数调用。
(2)进行大量处理的循环。
for (var i = 0,len=data.length; i < len; i++) { process(data[i]); };
process要花100ms,那么总的花费时间是由数组的长度决定的。JavaScript的执行是一个阻塞操作,脚本运行花费的时间越久,用户无法与页面交互的时间也越久。
解决这个问题有一种技术叫做:数组分块
小块小块地处理数组,通常每次一小块。
基本的思路是为要处理的项目创建一个小队列,然后使用计时器取出下一个要处理的项目进行处理,接着再设置另一个定时器。
function chunk(array, process, context) { setTimeout(function(){ var item = array.shift(); process.call(context, item); if (array.length>0) { setTimeout(arguments.callee, 100); }; }, 100) }; var data = [12,12,1234,453,436,23,23,5,4123,45,346,3563,2234,345,342]; function printValue(item) { var div = document.getElementById('myDiv'); div.innerHTML += item + "</br>"; }; chunk(data.concat(), printValue);
chunk方法接收三个参数:要处理的项目的数组,用于处理项目的函数,运行该函数的环境。这个函数用来处理数组。
调用chunk时,为了不改变数组原来的值,用到了一个concat方法:(返回一个新的数组,此方法里面可以添加参数。这些参数和调用的数组组成一个新的数组。)。由于printValue函数处在全局作用域内,因此无需给chunk()传递一个context对象。
3.函数节流:
函数节流的思想是:某些代码不可以在没有间断的情况下连续重复执行。
第一次调用函数,创建一个定时器,在指定的时间间隔后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。
function printValue(item) { var div = document.getElementById('myDiv'); div.innerHTML += item + "</br>"; }; chunk(data.concat(), printValue); // 函数节流 function throttle(method, context) { clearTimeout(method.tId); method.tId = setTimeout(function(){ method.call(context); }, 100) }; function resizeDiv() { var div = document.getElementById('myDiv'); div.style.height = div.offsetWidth + "px"; }; window.onresize = function() { throttle(resizeDiv); };
throtttle函数用来进行函数节流:这个函数首先清除之前设置的定时器。然后定义定时器,在100ms后再执行method方法(method.call(context)是为了确保方法在适当的环境中执行)。如果这个throttle在100ms内执行了50次,那么method方法也只会执行一次。(这就是节流)
window.onresize方法会造成浏览器运行缓慢的两个原因:
(1)首先,要计算offsetWidth属性,如果该元素或者页面上其他元素有非常复杂的css样式,那么整个过程将会很复杂。
(2)其次,设置某个元素的高度需要对页面进行回流来令改动生效。如果页面有很多元素同时应用了相当数量的css的话,这个又需要很多的计算。
只要代码是周期性执行的,都应该使用节流,但是你不能控制请求的执行的效率。可以改动throttle函数的时间间隔。
相关文章推荐
- JS第一次课
- JavaScript总结
- JSON 数据格式
- js定时器timer
- 使用Ajax中的Json传输数据时,从后台查询的字段过滤方法。
- 【bzoj1016】【JSOI2008】【最小生成树计数】【dfs+最小生成树】
- javascript类型转化加法就不会直接字符相加了
- 用javascript实现五子棋(二)
- 用javascript实现五子棋(一)
- javascript日期格式化方法汇总
- 初学javascript
- 《高性能javascript》一书要点和延伸(上)
- ServiceStack.Text json中序列化日期格式问题的解决
- ServiceStack.Text json中序列化日期格式问题的解决
- JavaScript---this
- js写一个日期
- Javascript - IE8下parseInt()方法的取值异常
- JavaScript设计模式——状态模式
- JavaScript权威指南学习之第8章 函数
- JavaScript权威指南学习之第7章 数组