黑马程序员技术交流社区

标题: 【成都校区】js史上最精简！防抖节流 [打印本页]

---

作者: 小蜀哥哥    时间: 2019-10-17 17:29
标题: 【成都校区】js史上最精简！防抖节流


前言

---

作为前端开发人员，相信大家对防抖和截流早已是十分熟悉了，初次听说这个玩意儿的时候我的第一反应是

防抖，防止抖动？节流，节约流水？？
于是乎百度了一波，终于弄懂。   就是，为了防止事件在短时间内被多次触发的两种解决方案。网上巴拉巴拉一堆说法，   总结：
   防抖：你狂点按钮也没有，等你冷静下来事件才会触发。
   节流：游戏里面的技能冷却功能。
好的，然后呢？？

然后呢？当然是百度一下ctrl+c，ctrl+v完成功能点啊，自己写？？不存在的

于是乎我找了一大堆案例总结几个例子大概是：

防抖：

[JavaScript] 纯文本查看 复制代码

//例子1

function debounce(fn,delay=200){

        let timer = null;

        return function(){

                if(timer) clearTimeout(timer);

                timer = setTimeout(()=>{

                        fn.apply(this,arguments);

                        timer = null;

                },delay);

        }

}

//例子2

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);

        }

}

节流：

[JavaScript] 纯文本查看 复制代码

//时间戳版

function throttle(func, wait) {

    let previous = 0;

    return function() {

        let now = Date.now();

        let context = this;

        let args = arguments;

        if (now - previous > wait) {

            func.apply(context, args);

            previous = now;

        }

    }

}

throttle(count,1000);

//定时器版

function throttle(func, wait) {

    let timeout;

    return function() {

        let context = this;

        let args = arguments;

        if (!timeout) {

            timeout = setTimeout(() => {

                timeout = null;

                func.apply(context, args)

            }, wait)

        }

    }

}

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2