防抖:
前面所有触发都被取消,最后一次在规定时间之后才会触发,如果连续触发只会执行一次。防抖使用debounce
例如:比如input框搜索内容,oninput事件输入框内的值变化就会触发,使用lodash插件里面封装好的debounce方法控制它输入完才发送请求,_代表lodash函数对象,debounce是它其中的一个方法
//原生js
input.oninput=_.debounce(function(){
//axios请求
},1000)
节流
在规定时间间隔内不会重复触发回调,只有大于时间间隔才会触发,频繁触发变为少量触发。节流使用throttle方法
例如:点击按钮的计数器,多级分类鼠标滑过显示,点击切换轮播图
//计数器,//无论点击多少次,在一秒内只会加一
button.click = _throttle(function(){
this.count++
},1000)
//多级分类
//在vue中使用ES5写法
import throttle from 'lodash/throttle'
methods:{
//ES6写法
事件(){
逻辑
}
//ES5写法
事件:throttle(function(){
逻辑
},时间)
}