1. 防抖 只执行最后一次操作,类似于回城操作,是可以自己打断的,比如说回家过程中缺钱买装备,再来补一波兵;
使用场景: input框输入内容进行自动搜索,应该等输入结束之后在进行;页面的滚动操作等;
vue案例: 稍后补充
2. 节流 只执行第一次操作,类似于技能冷却,放了技能就要等cd结束以后才可以进行下一次操作;
使用场景: 上拉加载下拉刷新等post请求;
vue案例:采用了mixins混入的方法,先定义mixin文件,内容如下:
export default { data () { return { isThrottle: true } }, methods: { throttle(time = 2000) { return new Promise((resolve) => { if (!this.isThrottle) return resolve() this.isThrottle = false setTimeout(() => { this.isThrottle = true }, time) }) } } }
引用和调用如下
import Minxin from "../../../src/config/mixin.js"; export default { mixins: [Minxin], methods: { submit() { this.throttle().then(() => { // 执行请求 }) } } }