JavaScript防抖与节流详解
作者：页神建辑-思而后学
这篇文章主要介绍了JS中的防抖与节流及作用详解，本文通过文字说明加示例代码的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
防抖debounce
定义：对于短时间内连续触发的事件，比如滚动事件，防抖就是让某个时间期限内，事件处理函数只执行一次。
关于防抖，拿手指按压弹簧举例，用手指按压弹簧，一直按住，弹簧将不会弹起直到松开手指。
举例resize:
function debounce(fn, wait){
var timer = null;
return ()=>{
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(fn, wait);
}
}
function handle(){
console.log(Math.random());
}
window.addEventListener("resize",debounce(handle, 1000));
上面是非立即执行版
立即执行版
function debounce(fn, wait){
let timeid, flag = true;
return () => {
clearTimeout(timeid);
if(flag){
fn();
flag = false;
}else{
timeid = setTimeout(()=>{
flag = true;
}, wait);
}
}
}
拖动浏览器窗口，触发resize，此时并不触发handle函数，定时器计时，在计时时间内再次触发resize的话，则会从新计时，这样做的好处就是拖动浏览器窗口触发resize，并不会频繁执行handle函数，只让其在需要执行的时候去运行，有效的去除了冗余。
常见写法：
const debounce = (func, delay = 200) => {
let timeout = null
return function () {
clearTimeout(timeout)
timeout = setTimeout(() => {
func.apply(this, arguments)
}, delay)
}
}
节流throttle
定义：让事件在一定时间内只执行一次。
本意是像水龙头的水滴一样，规定时间内只执行一次，减少频繁反复执行。
如搜索框input事件。
通过时间戳计算：
function throttle(fn,wait){
let startTime = 0;
return function(){
let endTime = Date.now();
if(endTime-startTime>wait){
fn();
startTime = endTime;
}
}
}
通过定时器：
function throttle(fn,wait){
let timeid = null;
return function(){
if(!timeid){
timeid = setTimeout(function(){
fn();
timeid = null;
},wait)
}
}
}
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！