节流和防抖
2020-03-31 本文已影响0人
Zhou_qn
参考文章：https://www.jianshu.com/p/c8b86b09daf0
在前端开发中，会经常用到一些触发事件,例如scroll、mousemove 等，但这些事件如果不加以限制就会持续的执行某个函数，因为浏览器性能是有限的，频繁执行函数很消耗浏览器的性能，所以我们希望控制事件的执行频率
节流
触发时不会一直执行函数，而是一定时间内执行一次函数（一段时间内执行一次代码）
防抖
持续触发不执行，不触发的一段时间之后再执行（每次触发都会更新时间）
- 例：
body里的代码
<body>
<div id="content" style="height: 200px; width: 200px; border: 1px black solid"></div>
</body>
script里的代码
- 防抖：
let num = 1;
function count() {
let content = document.getElementById('content');
content.innerHTML = num++;
}
function debounce(func,wait){
let timeout;
return function () {
let context = this;
let args = arguments;
if(timeout){
//当一直触发就会一直进入这个分支，就会重新计时
clearTimeout(timeout);
}
timeout = setTimeout(()=>{
func.apply(context,args);
},wait)
}
}
content.onmousemove = debounce(count,1000);
- 节流
function throttle(func,wait){
let timeout;
return function(){
let context = this;
let args = arguments;
if(!timeout){
//当进入以后！timeout一直是false,
//直到wait时间到了，timeout＝null,!timeout=true,
//触发func.apply(context,args),计数函数被执行
timeout = setTimeout(()=>{
timeout = null;
func.apply(context,args);
},wait)
}
}
}
content.onmousemove = throttle(count,1000);
