节流:高频率触发的事件,在指定的单位时间内,只响应最后一次,如果在指定的时间在触发,则重新计算时间(后面触发的事件执行,替代了前面的事件)
- scroll 事件,每隔一秒计算一次位置信息等
- 浏览器播放事件,每个一秒计算一次进度信息等
防抖:函数在一段时间内的多次调用,仅使得最后一次调用有效。
- 登录、发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖
- 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防抖
- 文本编辑器实时保存,当无任何更改操作一秒后进行保存
1、创建一个静态js文件 utils.js
// 节流
function throttle(fn, delay) {
var end = 0
return function () {
var start = new Date()
if (start - end > delay) {
fn.apply(this, arguments)
end = start
}
}
}
// 防抖
export const deboundce = (fn, delay)=> {
var timer = null;
return function () {
if (timer != null) clearTimeout(timer);
timer = setTimeOut(() => {
fn.apply(this, arguments)
}, delay)
}
}
}
2、这里以vue项目中引入方法
<template>
<div>
<el-input placeholder="输入关键字进行过滤"
@input="inputChange"
v-model="filterText">
</el-input>
</div>
</template>
<script>
import { _debounce, _throttle } from "../../static/js/utils.js";
export default {
data() {
return {
filterText: "",
};
},
methods: {
inputChange: _throttle(function(_type, index, item) {
console.log(this.filterText)
// do something ...
}, 2000)
}
};
</script>