防抖与节流(lodash.js)
我们这里用到一个第三方库:lodash.js
中文文档: https://www.lodashjs.com/docs/lodash.throttle
CDN:
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.corejs"></script>
vue里面安装及使用:
npm i lodash
import {
debounce,throttle} from 'lodash'
methods: {
addColor: throttle(function(index) {
this.currentIndex = index;
},50)
},
5.7.1 防抖
1、概念:前面的所有的触发都被取消,最后一次执行 在 规定的时间 之后才会触发,也就是说如果连续快速的触发,只会执行最后一次
2、loadsh 中的 debounce 函数,参数为一个函数和防抖时间
3、一般用于表单的输入而触发的回调函数,实现当用户输入完成之后再执行回调函数
4、具体案例:当输入停止 且1s后 才会打印111
const input = document.querySelector('input');
input.oninput = _.debounce(function() {
console.log('111');
},1000)
5.7.2 节流
1、概念:在规定的 间隔时间 内不会重复触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变为少量触发
2、一般防止用户快速点击,例如1s内只能执行函数一次
3、loadsh 中的 throttle 函数,参数为一个函数和节流时间
4、使用(注意这里的 methods 函数使用方法)
import {
throttle} from 'lodash'
methods: {
addColor: throttle(function(index) {
this.currentIndex = index;
},50)
},