- 函数防抖:是指在事件被触发 n 秒后再执行回调,如果在这n秒内事件又被触发,则重新计时。这可以使用在一些点击请求的事件上,避免因为用户的多次点击向后端发送多次请求。
- 函数节流
是指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。节流可以使用在
scroll 函数的事件监听上,通过事件节流来降低事件调用的频率。
<script>
// 函数防抖的实现
function debounce(fn, wait) {
var timer = null;
return function() {
var context = this,
args = arguments;
// 如果此时存在定时器的话,则取消之前的定时器重新记时
if (timer) {
clearTimeout(timer);
timer = null;
}
// 设置定时器,使事件间隔指定事件后执行
timer = setTimeout(() => {
fn.apply(context, args);
}, wait);
};
}
// 函数节流的实现;
function throttle(fn, delay) {
var preTime = Date.now();
return function() {
var context = this,
args = arguments,
nowTime = Date.now();
// 如果两次时间间隔超过了指定时间,则执行函数。
if (nowTime - preTime >= delay) {
preTime = Date.now();
return fn.apply(context, args);
}
};
}
</script>
防抖节流例子
防抖:由此可以看出来,当我们重新频繁的输入后,并不会立即调用方法,只有在经过指定的间隔内没有输入的情况下才会调用函数方法
<body>
<input id="input" type="text" placeholder="请输入...">
<p id="text"></p>
</body>
<script>
//函数防抖的实现
function input(value){
console.log(`输入的内容${value}`)
}
const ipt = document.getElementById('input')
function debounce(fn, wait) {
var timer = null;
return function() {
var context = this,
args = arguments;
// 如果此时存在定时器的话,则取消之前的定时器重新记时
if (timer) {
clearTimeout(timer);
timer = null;
}
// 设置定时器,使事件间隔指定事件后执行
timer = setTimeout(() => {
fn.apply(context, args);
}, wait);
};
}
const debounceInput = debounce(input,500)
ipt.addEventListener("keyup",function(e){
debounceInput(e.target.value)
})
</script>
节流:节流节流就是在规定的时间间隔呢,重复触发函数,只有一次是成功调用.可以从下面例子看到在一直输入的情况下每隔一段时间会触发一次函数
<body>
<input id="input" type="text" placeholder="请输入...">
<p id="text"></p>
</body>
<script>
//节流节流就是在规定的时间间隔呢,重复触发函数,只有一次是成功调用
//可以看到在一直输入的情况下每隔一段时间会触发一次函数
function input(value){
console.log(`输入的内容${value}`)
}
const ipt = document.getElementById('input')
function throttle(fn, delay) {
var preTime = Date.now();
return function() {
var context = this,
args = arguments,
nowTime = Date.now();
// 如果两次时间间隔超过了指定时间,则执行函数。
if (nowTime - preTime >= delay) {
preTime = Date.now();
return fn.apply(context, args);
}
};
}
const throttleInput = throttle(input,500)
ipt.addEventListener("keyup",function(e){
throttleInput(e.target.value)
})
</script>
方法总结:
- 防抖和节流都是为了解决频繁触发某个事件的情况造成的性能消耗。
- 防抖就是在出发后的一段时间内执行一次,例如:在进行搜索的时候,当用户停止输入后调用方法,节约请求资源
- 节流就是在频繁触发某个事件的情况下,每隔一段时间请求一次,类似打游戏的时候长按某个按键,动作是有规律的在间隔时间触发一次
Vue防抖节流的使用
封装公用的方法
第一步:在utils文件夹下建立public.js文件
<script>
export const Debounce = (fn, t) => {
let delay = t || 500
let timer
return function () {
let args = arguments
if(timer){
clearTimeout(timer)
}
timer = setTimeout(() => {
timer = null
fn.apply(this, args)
}, delay)
}
};
/**
* 函数节流
* @param fn
* @param interval
* @returns {Function}
* @constructor
*/
export const Throttle = (fn, t) => {
let last
let timer
let interval = t || 500
return function () {
let args = arguments
let now = +new Date()
if (last && now - last < interval) {
clearTimeout(timer)
timer = setTimeout(() => {
last = now
fn.apply(this, args)
}, interval)
} else {
last = now
fn.apply(this, args)
}
}
}
</script>
第二步:在组件中引入
import { Debounce, Throttle } from '../../utils/public.js' //自己要注意自己的路径
第三步:在组件内使用
<template>
<div>
<div>
防抖:<input v-model="name" type="text" @keyup="appSearch">
</div>
<div style="margin-top: 20px;">
<button @click="jieliu" :buttonname="buttonname">{{buttonname}}</button>
</div>
</div>
</template>
<script>
import { Debounce, Throttle } from '../../utils/public.js'
export default{
data(){
return{
name:'',
buttonname:'节流'
}
},
methods:{
//防抖事件
appSearch: Debounce (function() {
this.getfangdoudata()
}, 1000),
getfangdoudata() {
console.log(this.name)
},
getjieliudata(){
console.log('节流')
},
//节流事件
jieliu:Throttle(function(){
this.getjieliudata()
},1000)
},
}
</script>
结果如图所示