防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算。
一、函数防抖
-
定义
在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时;典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时。 - 实现原理
函数防抖的基本思想是设置一个定时器,在指定时间间隔内运行代码时清楚上一次的定时器,并设置另一个定时器,知道函数请求停止并超过时间间隔才会执行。 -
使用场景
文本框输入搜索(连续输入时避免多次请求接口) - 代码实现
/**
* 函数防抖
*/
export function debounce(fn, delay) {
// 记录上一次的延时器
var timer = null;
var delay = delay || 200;
return function() {
var args = arguments;
var that = this;
// 清除上一次延时器
clearTimeout(timer)
timer = setTimeout(function() {
fn.apply(that,args)
}, delay);
}
}
二、函数节流
-
定义
规定在一个单位时间内,只能触发一次函数,如果这个单位时间内触发多次函数,只有一次生效; 典型的案例就是鼠标不断点击触发,规定在n秒内多次点击只有一次生效。 - 实现原理
其原理是用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次执行的时间戳, - 使用场景
resize、scroll、mousemove等事件触发监听
- 代码实现
/**
* 函数节流
*/
export function throttle(fn,delay){
var lastTime;
var timer;
var delay = delay || 200;
return function() {
var args = arguments;
// 记录当前函数触发的时间
var nowTime = Date.now();
if (lastTime && nowTime - lastTime < delay) {
clearTimeout(timer);
timer = setTimeout(function () {
// 记录上一次函数触发的时间
lastTime = nowTime;
// 修正this指向问题
fn.apply(this, args);
}, delay);
}else{
lastTime = nowTime;
fn.apply(this, args);
}
}
}
三、在Vue中使用函数防抖实现输入框搜索
效果图如下
- 新建common.js文件
/**
* 函数防抖
*/
export function debounce(fn, delay) {
// 记录上一次的延时器
var timer = null;
var delay = delay || 200;
return function() {
var args = arguments;
var that = this;
// 清除上一次延时器
clearTimeout(timer)
timer = setTimeout(function() {
fn.apply(that,args)
}, delay);
}
}
- 在vue组件中引入
import {debounce} from '@/utils/common.js'
- 在组件中使用
<div class="white-search-bar">
<div class="search-bar-item">
<span class="iconfont icon-search"></span>
<input class="search-bar-input" :class="{'search-bar-focus':isSearchFocus}" type="text" maxlength="8" placeholder="应用搜索" v-model="keyword" @keyup="appSearch" @focus="onSearchFocus" @blur="onSearchBlur">
</div>
<span class="search-bar-btn" @click="appSearchCancel" v-if="isSearchFocus">取消</span>
</div>
methods:{
appSearch:debounce(function(){
this.getAppList()
},300)
}
vue使用节流
我要的效果是停止滚动2s后执行一次fnHandleScroll函数。解决办法把fnScroll函数从method方法中移入到data属性中,然后在created生命周期给fnScroll赋值,可以完美解决这个bug。
<template>
<div class="cfpa-brief-preview-scroll" ref="previewText" @scroll.passive="fnScroll">
// 此处省略html代码
</div>
</template>
<script>
export default {
name: 'publicPreviewBriefing',
data () {
return {
count: 0,
fnScroll: () => {}
}
},
created () {
this.fnScroll = this.fnThrottle(this.fnHandleScroll, 2000)
},
methods: {
/**
* @description [fnHandleScroll 内容区域滚动]
* @author shanshuizinong
* @param {Object} e [事件对象]
* @returns {null} [没有返回]
*/
fnHandleScroll (e) {
console.log('scroll触发了:' + this.count++, new Date())
},
/**
* @description [fnThrottle 节流函数]
* @author shanshuizinong
* @param {Function} fn 延时调用函数
* @param {Number} delay 延迟多长时间
* @param {Number} atleast 至少多长时间触发一次
* @return {Function} 延迟执行的方法
*/
fnThrottle (fn, delay, atleast) {
let timer = null
let previous = null
return function () {
let now = +new Date()
if (!previous) previous = now
if (atleast && now - previous > atleast) {
fn()
previous = now
clearTimeout(timer)
} else {
clearTimeout(timer)
timer = setTimeout(function () {
fn()
previous = null
}, delay)
}
}
}
}
}
</script>
通过触发的时间可以看出,fnHandleScroll不会连续执行多次,基本达到了预期效果,解决这个问题还有其他的方法,我这里只提供这一种,fnThrottle 函数还可以提供第三个参数,希望至少多长时间触发一次。
注意 另一种方法是在一个公共方法内编写
1.在公共方法中(如 public.js 中),加入函数防抖和节流方法
// 防抖
export default {
_debounce(fn, delay) {
var delay = delay || 200;
var timer;
return function () {
var th = this;
var args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
fn.apply(th, args);
}, delay);
};
},
// 节流
_throttle(fn, interval) {
var last;
var timer;
var interval = interval || 200;
return function () {
var th = this;
var args = arguments;
var now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
fn.apply(th, args);
}, interval);
} else {
last = now;
fn.apply(th, args);
}
}
}
}
2.在需要使用的组件引用
import { public } from "@/utils/public";
3.在 methods 中使用
methods: {
changefield: public._debounce(function(_type, index, item) {
// do something ... }, 200)
}