节流函数(throttle)就是让事件处理函数在大于等于执行周期时才能执行,周期之内不执行,即事件一直被触发,那么事件将会按每小段固定时间一次的频率执行。
这里使用lodash库实现节流,他的中文网站是https://www.lodashjs.com/,除了节流,它还封装了很多方法,如防抖,深拷贝等,如有需要,可以详细看一下文档。
1、查看项目是否引用了lodash库。全局搜索lodash,如果有相关的代码,说明引用了。
2、如果没有搜到,用这个命令安装。 npm i --save lodash
3、再要使用的地方引入
import throttle from "lodash/throttle";
changeIndex: throttle(function (index) {
this.currentIndex = index;
}, 50)
// 本来changeIndex应该这样写的,每次传入index,都改变currentIndex的值,加上节流之后五十毫秒改变一次currentIndex的值
changeIndex(index) {
this.currentIndex = index;
}
vue实现输入框防抖
输入框每输入一个字符,都会发请求,用防抖可以让请求不那么频繁。
每输入一个字符,inputFn都会执行一次,先清除之前的定时器,然后在开一个定时器,从最后一个字符输入之后开始计时,如果300毫秒之后没有再进行输入,就输出输出框的内容。