函数节流与防抖

之前遇到了这样一个场景 页面一个输入框 用户输入东西按键抬起触发查询 相信这种情况非常常见 然而之前没有做优化 导致用户每次输入都会触发查询 哪怕按了一些像空格 ALT 这样对查询关键字毫无意义的按键也会触发查询 而我们希望当我们输入完整的关键词之后再做查询（尤其对于中文用户 我们更不希望用户在拼音阶段每个拼音都触发一次查询）那么这里就要用函数的节流和防抖来优化

节流 我们希望函数可以在每隔一定时间间隔后执行一次 关键在于执行频率
防抖 我们希望函数可以在固定时间间隔后执行一次 否则一直推迟执行

示例

从下面的代码可以看出 使用注释1部分 那么每次按键抬起都会触发查询 使用注释2部分 则会推迟1秒执行查询 期间如果再次输入 则重新计时 这就是防抖的思想

防抖.png

那么如果这时有个用户跳出来说 这个方式会导致一个用户体验的问题 很有可能就是希望可以一下就触发查询 又不能时时触发查询 那么就需要函数节流来优化频率问题 那就是下面的代码了

节流.png

个人觉得这两部分代码还可以优化 欢迎高手指点