概念:
函数防抖(debounce) :在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
函数节流(throttle) :规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
区别:
相同点:都是防止某一时间频繁触发,
不同点:函数防抖是某一段时间内只执行一次,函数防抖尤其是优化搜索框,防止恶意点击;而函数节流是间隔时间执行。
场景:
函数防抖
1、search搜索联想,用户在不断输入值时,用防抖来节约请求资源。
2、window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次
函数节流
1、鼠标不断点击触发,mousedown(单位时间内只触发一次)
2、拖拽事件,每拖动1px都会触发onmousemove(可以用throttle优化,每秒触发一次)
3、监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断
vue中封装使用
1.在src下新建utils目录
2.在utils中的index.js里放函数防抖和函数节流方法
// 防抖
export function _doubounce(fn, delay) {
var d = delay || 200; //
var timer; //定时器
return function() {
//形成闭包
var th = this;
var ags = arguments;
if (timer) {
//超过200就清除
clearTimeout(timer);
}
timer = setTimeout(function() {
timer = null; //防止内存泄漏
fn.apply(th, ags);
}, d);
};
}
// 节流
export function _throttle(fn,interval){
var last;//上一次时间
var interval=interval || 200
var timer;
return function(){
var th=this
var ags=arguments
var now =+new Date()
if (last && now-last < interval) {
clearTimeout(timer)
timer=setTimeout(function(){
last =now
fn.apply(th,ags)
},interval)
} else {
last =now
fn.apply(th,ags)
}
}
}
3.使用
<template>
<div class="box">
<div class="box1">
<el-input v-model="wd" ></el-input>
<el-button @click="search">搜索</el-button>
</div>
</div>
</template>
<script>
import { _doubounce, _throttle } from "@/utils/index.js";
export default {
data() {
return {
wd: "",
};
},
methods: {
search: _doubounce(function() {//防抖方法
console.log(this.wd);
}, 300),
search: _throttle(function() {//节流方法
console.log(this.wd);
}, 300),
},
};
</script>