防抖节流理解与应用场景

在开发中，常常会去监听滚动事件或者用户输入框验证事件，如果事件处理没有频率限制，会加重浏览器的负担，影响用户体验感。

因此可以采取防抖(debounce)和节流（throttle）来处理，减少调用事件的频率，达到较好的用户体验。

防抖（debounce):

一：html中

在事件触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时，重新触发定时器


<body><div class="box" id="container"><p>防抖演示</p><p>防抖演示</p><p>防抖演示</p><p>防抖演示</p><p>防抖演示</p><p>防抖演示</p><p>防抖演示</p><p>防抖演示</p><p>防抖演示</p></div>
</body>
<script>function debounce(fn, wait) {var timeout = null; // 使用闭包，缓存变量return function () {if (timeout !== null) {console.log('清除定时器啦')clearTimeout(timeout); //清除这个定时器}timeout = setTimeout(fn, wait);}}// 处理函数function handle() {console.log('触发函数');}var container = document.getElementById('container')container.addEventListener('scroll', debounce(handle, 1000));
</script>

当连续触发scroll事件时，handle函数只会在1秒时间内执行，如果继续滚动执行，就会清除定时器.

二.在Vue中使用函数防抖实现输入框搜索

1.新建debounce.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);}
}

2.在vue组件中引用

import {debounce} from '@/utils/debounce.js

3.在组件中使用

<template><div class="white-search-bar"><div class="search-bar-item"><span class="iconfont icon-search"></span><input class="search-bar-input" type="text" placeholder="应用搜索" v-model="keyword" @keyup="appSearch"></div></div>
</template>
<script>
import {debounce} from '@/utils/debounce.js'
export default {name: "debounce",data() {return {keyword:''};},methods: {appSearch:debounce(function(){console.log(11)})},
};
</script>

定义：在事件被触发n秒后再执行回调，如果在n秒内又被重新触发，则重新计时。

实现原理：函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清除上一次的定时器，并设置另一个定时器，直到函数请求停止并超过时间间隔才会执行

使用场景：文本框输入搜索（连续输入谜面多次请求接口）

防抖：是只执行最后一次，

节流：是控制执行次数

节流（throttle）：

定义：规定在一个单位时间内。只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效。典型案例：鼠标不断点击触发，规定n秒内多次点击只有一次生效

实现原理：用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳。然后每次触发scroll事件执行回调，回调中判断当前事件戳距离上次执行时间戳的间隔是否已经到达规定时间段，如果是，则执行，并更新上次执行的时间戳

使用场景：resize,scroll

function throttle(fn,delay){let flag=truereturn function(){if(flag){setTimeout(()=>{fn.call(this);flag=true},delay)}flag=false;}
}