Js的节流和防抖讲解及手写实现(基于通俗易懂案例说明)

1.众所周知,JavaScript的节流和防抖是很多面试官都喜欢问的问题(有些会让面试者简易手写出对应的主要实现过程和步骤).这里就此讲解下最简而易懂(大佬勿喷)的一种方法和其说明.

2.节流和防抖的概念:

A.节流概念: 事件(节流体内的函数)每隔一段时间(节流体内的定时器时间) 触发一次,可以触发多次。经典案例：王者荣耀的释放技能。

B.防抖概念: 事件(防抖体内的函数)动作完成后的一段时间(节流体内的定时器时间)后触发一次。经典案例：王者荣耀的回城。

3.未加节流和防抖的案例(代码和执行效果):

 function move(){
    console.log('窗口大小改变了');
 }
 window.addEventListener('resize',move)

4. 节流函数和加了节流的案例(代码和执行效果):

/*
            func: 所需加节流的函数;
            delay: 时间间隔(单位毫秒ms)
        */
        function throttle(func, delay) {   
            let timer = null;
            return function () {
                if (!timer) {
                    func.apply(this, arguments);
                    timer = setTimeout(() => {
                        timer = null;
                    }, delay);
                } else {
                    console.log("上一个定时器尚未完成");
                }
            }
        }

5. 防抖函数和加了防抖的案例(代码和执行效果):

/*
            func: 所需加防抖的函数;
            delay: 时间间隔(单位毫秒ms)
        */
        function debounce(func, delay) {
            var timeout;
            return function () {
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    func.apply(this, arguments);
                }, delay);
            }
        }

6.以上就是基于window的窗口改变事件结合节流和防抖简易函数来实现的基础讲解和效果展示.更多更详细的说明,可以查看其它大佬的博文(网上众多,百花缭绕).码字不易,多多支持(点赞,收藏).谢谢.