什么是防抖与节流？应用场景举例

news2024/10/6 10:33:00

防抖
节流
如何处理防抖与节流
- 防抖
- 节流
- 防抖例子
- 节流例子
- Vue + Axios全局接口防抖、节流封装实现
小结

防抖

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

应用场景：提交按钮、用户注册时候的手机号验证、邮箱验证

假设我们有一个登录按钮，如果用户在短时间内多次点击登录按钮，防抖技术可以防止系统误认为这是多次登录请求，而只将其视作一次有效的登录操作。

节流

节流：高频事件触发，但在n秒内只会执行一次，所以 节流会稀释函数的执行频率。

应用场景： window对象的resize、scroll事件拖拽时候的mousemove 射击游戏中的mousedown、keydown事件文字输入、自动完成的keyup事件

在窗口调整、页面滚动或者抢购等场景中，我们可能就需要使用节流来控制事件的执行频率，以防止资源的浪费。

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。

如何处理防抖与节流

防抖和节流是两种常见的优化技术，用于防止函数被过度调用。

防抖

对于防抖，可以采用以下方式进行处理：

在函数被触发后，先不立即执行函数，而是设置一个 延迟时间，比如n秒。

如果在延迟时间内再次触发了该函数，则重新计算执行时间。只有在延迟时间内没有再次触发函数，才执行函数。

节流

对于节流，可以采用以下方式进行处理：

同样在函数被触发后，先不立即执行函数，而是设置一个时间间隔，比如每n秒执行一次函数。

这样无论函数被触发的频率有多高，只有每n秒内的第一次触发会被执行。

具体实现防抖和节流的代码，可以参考以下示例代码：

// 防抖
function debounce(fn, delay) {  
  let timer = null;  
  return function() {  
    clearTimeout(timer);  
    timer = setTimeout(() => {  
      fn.apply(this, arguments);  
    }, delay);  
  };  
}

在防抖函数中，我们首先定义了一个定时器变量 timer。

在函数被触发时，先清除上一次的定时器，然后设置一个新的定时器，延迟指定时间后执行函数 fn。

这样就实现了在一段时间内只执行一次函数的效果。

// 节流
function throttle(fn, delay) {  
  let timer = null;  
  return function() {  
    if (!timer) {  
      timer = setTimeout(() => {  
        fn.apply(this, arguments);  
        timer = null;  
      }, delay);  
    }  
  };  
}

在节流函数中，我们同样定义了一个定时器变量 timer。

在函数被触发时，检查定时器是否已经存在，如果不存在，则设置一个新的定时器，延迟指定时间后执行函数 fn。

这样就实现了在一段时间内只执行一次函数的效果。

防抖例子

对于短时间内频繁点击或输入的事件触发，未使用防抖处理的事件对于用户体验并不是很好。因此我们可以使用防抖进行处理，如下：

<div class="box">
  进行防抖处理的：<input type="text" id="name" name="name">
</div>
<script>
  // 模仿一段ajax请求
  function ajax(value){
    console.log("ajax request: " + value + ", time: " + new Date());
  }
 
  // 防抖函数
  function debounce(func,delay){
    let timeout; //定时器
    return function(arguments){
      // 判断定时器是否存在，存在的话进行清除，重新进行定时器计数
      if(timeout) clearTimeout(timeout);//清除之前的事件
      timeout = setTimeout(()=>{
        func.call(this,arguments);//执行事件
      },delay);
    }
  }
 
  const inputBox = document.getElementById("name");
  // 使用防抖函数进行封装ajax
  let debounceAjax = debounce(ajax,500);
  inputBox.addEventListener("keyup",e=>{
    debounceAjax(e.target.value);
  })
</script>

从上面的运行结果可以看出，在500ms内输入文字按下键盘都不会触发请求事件，而是在输入框的定时器500ms停止输入后发送请求。

实现原理很简单，就是对于频繁输入的输入框请求事件添加定时器进行计数，在指定时间内进行频繁输入并不会进行ajax请求，而是在指定时间间隔内停止输入才会执行函数。

当停止输入但在此定时器计数时间内，会重新进行触发请求事件

节流例子

<div class="box">
  进行节流处理的：<input type="text" id="name" name="name">
</div>
<script>
  // 模仿一段ajax请求
  function ajax(value){
    console.log("ajax request: " + value + ", time: " + new Date());
  }
 
  // 节流--定时器版
  function throttle(func,delay){
    let timeout;//定义一个定时器标记
    return function(arguments){
      // 判断是否存在定时器
      if(!timeout){ 
        // 创建一个定时器
        timeout = setTimeout(()=>{
          // delay时间间隔清空定时器
          clearTimeout(timeout);
          func.call(this,arguments);
        },delay)
      }
    }
  }
 
  const inputBox = document.getElementById("name");
  // 使用节流函数进行封装ajax
  let throttleAjax = throttle(ajax,500);
  inputBox.addEventListener("keyup",e=>{
    throttleAjax(e.target.value);
  })
</script>

从上面可以看到，无论我们在输入框输入多少文字，在指定时间内只执行一次函数

Vue + Axios全局接口防抖、节流封装实现

import axios from 'axios'

function request(config) {
    const instance = axios.create({
        baseURL: 'http://localhost:3000/api',
        timeout: 10000
    })

    // 防抖
    const debounceTokenCancel = new Map()
    instance.interceptors.request.use(config => {
    const tokenKey = `${config.method}-${config.url}`
    const cancel = debounceTokenCancel.get(tokenKey)
    if (cancel) {
        cancel()
    }
    return new Promise(resolve => {
        const timer = setTimeout(() => {
            clearTimeout(timer)
            resolve(config)
        }, 800)
        debounceTokenCancel.set(tokenKey, () => {
            clearTimeout(timer)
            resolve(new Error('取消请求'))
        })
      })
    }, error => {
        console.log(error)
        return Promise.reject(error)
    })

    instance.interceptors.response.use(response => {
        return response
    }, error => {
        console.log(error)
        return Promise.reject(error)
    })

    // 节流
    let lastTime = new Date().getTime()
    instance.interceptors.request.use(config => {
        const nowTime = new Date().getTime()
        if (nowTime - lastTime < 1000) {
            return Promise.reject(new Error('节流处理中，稍后再试'))
        }
        lastTime = nowTime
        return config
    }, error => {
        console.log(error)
        return Promise.reject(error)
    })

    return instance(config)
}

export default request