JS防抖函数实现及应用

防抖函数是指事件多次不间断触发&＃xff0c;在一定时间内没有再触发时&＃xff0c;执行最后一次触发的事件函数。 举个栗子&＃xff0c;你每天给你女神送牛奶&＃xff0c;女神从未响应过你的好意&＃xff0c;但当你一段时间没有送牛奶时&＃xff0c;女神就会开始响应你。这就是一个简单的防抖机制&＃xff08;看来女神精通防抖函数&＃xff09;。

那么防抖函数有什么作用呢&＃xff1f;我们为什么要学防抖函数呢&＃xff1f;

他可以优化前端性能&＃xff0c;在一些频繁触发的事件里尤为明显&＃xff0c;例如窗口resize事件&＃xff0c;屏幕scroll事件&＃xff0c;鼠标mousemove事件。因为这些事件触发频繁&＃xff0c;如果不用防抖&＃xff0c;那么事件的绑定函数会运行无数次&＃xff0c;严重影响性能。使用了防抖&＃xff0c;就可以实现&＃xff0c;当事件在我们规定的延迟时间内不再触发&＃xff0c;我们就执行一次事件绑定函数。

一、使用Echats等可视化类库实现当窗口宽度变化而变化图形

二、图片、列表懒加载

三、输入框keyup实时搜索

等等.......(想到再补充)

本案例实现的是&＃xff0c;实时监听用户输入事件&＃xff0c;在用户停止输入延迟一秒后执行我们相关的事件处理函数

最终效果&＃xff1a;

防抖函数本质上是函数闭包的典型应用。利用闭包的特点&＃xff0c;将变量常驻内存&＃xff0c;实现闭包的函数访问的变量是上次函数运行的值。从而清除定时器任务