每天一道面试题:js-防抖和节流函数

96 阅读1分钟

Snipaste_2023-06-04_17-18-49.png

仓库链接: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=])`

详情可自行查看文档