函数节流
在调用window.onresize事件时,如果操作频繁操作DOM极为耗性能,因此在这种情况下可以通过定时器对该函数进行节流。
函数节流背后的基本思想是:
某些代码不可以在没有间断的情况连续重复执行。
第一次调用函数,创建一个定时器,在指定的间隔之后运行代码。
第二次调用函数,它会清除前一次的定时器并设置另一个。如果前一个定时器执行过了,这个操作就没有任何意义。
然而,如果前一个定时器尚未执行,其实就是将替换为一个新的定时器。
目的是只有在执行函数的请求停止了一段时间之后才执行。以下是该模式的基本形式:
var processor = {
timeoutId: null,
//实际进行处理的方法
performProcessing: function(){
//实际执行的代码
},
//初识处理调用的方法
process: function(){
clearTimeout(this.timeoutId);
var that = this;
this.timeoutId = setTimeout(function(){
that.performProcessing();
},100)
}
}
processor.process();
process() 初始化任何处理所必须调用的。
performProcessing() 实际进行应完成的处理。
这个模式可以使用throttle()函数来简化,这个函数可以自动进行定时器的设置和清除,如下例所示:
function throttle(method,context){
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
},100)
}
throttle()函数接受两个参数:
- method 要执行的函数
- 在哪个作用域执行
上面这个函数首先清除之前设置的任何定时器。
来看看函数节流的具体应用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数节流</title>
</head>
<body>
<div id='root' style="background: red;">
123
</div>
<script>
var root = document.getElementById('root');
function reszie(){
console.log('offsetWidth',root.offsetWidth);
root.style.height = root.offsetWidth + 'px';
root.style.background = 'red';
}
window.onresize = function(){
throttle(reszie);
}
//method 要执行的函数
//context 在哪个作用域
function throttle(method,context){
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
},1000)
}
</script>
</body>
</html>