序言
好久没写博客,正好今天项目需要增加防抖功能,特此记录一下。网上有很多例子,我试试了,没一个成功的(要哭了~~~~),最后参考别人的写法写了个,成功了。。。废话不说了,正文来了。
防抖
使用场景:如搜索框,用户在输入的时候使用change事件去调用搜索,如果用户每一次输入都去搜索的话,就会消耗很大的服务器资源。如果每次用户停止输入后,延迟超过一定时间时,才去请求服务器的话,会节省服务器资源,提升用户体验。
原理:事件回调函数在一段时间(300毫秒)后才执行,如果在这段时间内再次调用则重新从0开始计算到300毫秒的时间,当预定的时间内没有再次调用该函数,则执行事件回调函数
代码示例:
/**
* 防抖
* @param {Function} func 要执行的回调函数
* @param {Number} wait 延时的时间
* @param {Boolean} immediate 是否立即执行
* @return null
*/
let timeout;
export function Debounce(func, wait=300, immediate = false) {
// 清除定时器
if (timeout !== null) clearTimeout(timeout);
// 立即执行,此类情况一般用不到
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(function() {
timeout &