lodash的防抖debounce和节流throttle
防抖debounce
ladash-debounce
在前端项目开发工作中，我们经常会遇到搜索查询等类似功能，用户在不断输入值时，只要按下键盘就会触发函数调用，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去请求接口，只需要在输入完成后做请求。
通常这种情况下我们怎么去解决的呢？debounce就是用来处理这种情况的。
debounce，又称防抖动函数。
定义：如果一个函数持续地触发，那么只在它结束后过一段时间只执行一次。
应用场景
举个
以下情况给输入框绑定了input事件，即没有使用防抖函数，只要按下就会触发事件。在运行的时候会发现存在一个问题：这个函数的执行频率，太！高！了！
文章图片
未使用防抖函数.png
使用了debounce防抖函数后可以看出， 只有在最后一次输入的1000ms（设定时间）后真正的被执行了，且只触发一次，效果如下：
文章图片
使用防抖函数效果.png
节流throttle
节流和防抖，它存在的含义都是为了性能问题。
但他们还是有区别的。区别在于：防抖适合于输入事件, 等到最后一次输入才执行需要进行的操作。
节流适合于点击事件, 第一下点击就能生效, 之后指定时间段内的点击不生效。
vue中应用
【lodash的防抖debounce和节流throttle】本文使用的是lodash插件的内置debounce和throttle。
以debounce为例，throttle同debounce用法一致，区别在于是点击事件还是输入事件。
// 如未安装先安装lodash插件
npm i --save lodash
// 1. 引入
let lodash = require('lodash')
// 2. 应用
/**
* 输入（节流）
*/
getCode: lodash .debounce(function() {
console.log(this.username)
},1000),/**
* 生成费用（防抖）
*/
handleSave: lodash.throttle(function (data) {
this.input = data
this.loadRefresh()
}, 1000),// 1000的含义是在第一次点击后的1秒内点击无效，1秒后点击可再次触发
推荐阅读
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量