仓库链接:RevolverCitrus/Front-end-basic-note: 前端基础知识笔记+前端面试题八股文 (github.com)
防抖
定义:单位时间内,频繁触发事件,只执行最后一次。
1.使用setTimeout实现
//fn:传入的函数,即需要进行的操作,比如是DOM操作、数据处理等
//t:单位时间,在这个单位时间内,事件只会执行最后触发的一次
function debounce(fn, t) {
//1.声明一个定时器变量
let timer;
return function (){
//2.先判断是否有定时器
if(timer)
//有,则清除以前的定时器
clearTimeout(timer);
//3.开启新的定时器
timer = setTimeout(function () {
//4.在定时器里面调用传入的函数
fn();
},t)
}
}
2.使用Lodash库实现防抖(Lodash是常用的js库)
使用Lodash库中_.debounced(防抖动)函数实现
_.debounce(func, [wait=0], [options=])
详情可自行查看文档
节流
定义:所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。
1.使用setTimeout实现
//fn:传入的函数
//t:单位时间
function throttle(fn,t){
//1.声明一个定时器变量
let timer = null;
return function () {
//2.当鼠标每次滑动都先判断是否有定时器了
if(!timer){
//3.没有,则开启新的定时器
timer = setTimeout(function () {
//3.1调用被传入的需要执行的函数fn
fn();
//3.2清空定时器
timer=null;
},t)
}
}
}
2.使用Lodash库实现节流
使用Lodash库中_.throttle函数实现
`_.throttle(func, [wait=0], [options=])`
详情可自行查看文档