什么是防抖、节流？小程序项目优化——防抖、节流

1.什么是防抖、节流？（个人理解）

防抖：延迟函数执行。设置定时器，通过定时器来执行函数，可以重置定时器防止函数高频率的执行导致加载缓慢、加重服务器负担。

节流：间隔执行函数。如果某段代码在一段时间内重复触发，则只生效一次。

2.为什么要防抖节流？

防止高频率执行代码（对代码的执行进行限制），优化用户体验。

3.举个栗子：小程序搜索功能的防抖实现：（自己摸滚打爬总结的）

在写小程序搜索商品功能的过程中，我遇到了这样一个问题：

在搜索框输入我想要搜索的内容时，搜索功能在不断的执行，但我的目的是在我打完字后再进行搜索，而不是我每打一个字母就开始搜索。

如何解决呢？防抖！

第一步：bindinput双向绑定（搜索框内容发生改变时执行搜索函数）

<input placeholder="请输入搜索商品名称" value="{{inputValue}}" bindinput="inputChange" />

第二步：监听输入框内容变化，加上防抖执行搜索函数

time: -1,
//输入框变化
    inputChange(e) {
        const { value } = e.detail;
        //防抖的实现： 先清除定时器
        clearInterval(this.time);
        //再重新打开计时器（每当数据更新就会导致  重置计时器）
        this.timeId = setTimeout(() => {
          //达到1秒数据没有更新，就会真正发送请求
            this.getGoods(value);
        }, 1000);
    },

ok  完结