防抖和节流

防抖（Debouncing）： 防抖是指在事件被触发后，等待一定的时间间隔，如果在这个时间间隔内再次触发该事件，则重新计时。只有当事件停止触发一段时间后，才会执行相应的操作。防抖常用于优化输入框的搜索建议、滚动事件等场景，可以减少不必要的请求或操作，提升性能。

节流（Throttling）： 节流是指在一定的时间间隔内只触发一次事件，即使事件在这段时间内多次触发，也只会执行一次相应的操作。节流常用于优化滚动事件、窗口调整事件等，可以减少事件处理的频率，提高性能。

可以参考下图进行理解：

概念理解了，但是怎么实现防抖和节流呢？？？？

例如下列代码，实现的效果是我只要我输入一个内容，就会触发一次。

function search(e) {
    let str = "您输入了：" + e.value + "<br />";
    s1.innerHTML = s1.innerHTML + str
}

function search2(e) {
    let str = "您输入了：" + e.value + "<br />";
    s2.innerHTML = s2.innerHTML + str
}

防抖：

var timer;
function search(e) {
    // 判断如果timer存在，那么则将timer清除
    if(timer){
        clearTimeout(timer)
    }
    timer = setTimeout(() => {
        let str = "您输入了：" + e.value + "<br />";
        s1.innerHTML = s1.innerHTML + str
    },3000);
}

节流：

//定义一个变量
var lastTime; 
function search2(e) {
    var newTime = new Date();
    //判断当前时间是否已经过了三秒
    if(!lastTime || newTime - lastTime > 3000){
        let str = "您输入了：" + e.value + "<br />";
        s2.innerHTML = s2.innerHTML + str;
        //三秒过后，将我定义的变量稀释掉
        lastTime = newTime;
    }
}

以上就是防抖和节流的一个简单的实现，那么，有没有更方便更简单的方法呢？？？

-- 节流防抖可以借助第三方库 lodash 实现

Lodash 简介 | Lodash中文文档 | Lodash中文网

1. 安装 lodash：

npm i lodash --save

2. 在使用的页面中进行引入：

import _ from "lodash";

3. 使用：

节流：

1）在页面中设置一个触发事件

2）用 lodash 中的 throttle 方法包裹函数实现节流

handleSearch: _.throttle(function (e) {
    //执行操作
},1000)

防抖：

1）在页面中设置一个触发事件

2）用 lodash 中的 debounce 方法包裹函数实现节流

handleSearch: _.debounce(function (e) {
    //执行操作
},1000)

_.debounce(func, [wait=0], [options=])

在小程序中如何使用 lodash ？？

微信小程序中使用lodash会报错，问题解决-优快云博客