JS 函数节流和函数防抖的区别（JS 与 Vue 用法）

最新推荐文章于 2024-07-05 11:02:00 发布

卡尔特斯

最新推荐文章于 2024-07-05 11:02:00 发布

阅读量374

点赞数 2

分类专栏： Vue2.x JavaScript 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/zz00008888/article/details/125044095

版权

Vue2.x 同时被 2 个专栏收录

68 篇文章 13 订阅

订阅专栏

JavaScript

41 篇文章 2 订阅

订阅专栏

一、区别

防抖与节流的相同点: 为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
函数防抖(debounce): 短时间内连续触发事件后 n 秒内函数只会执行一次，如果 n 秒内事件再次被触发，则重新计算时间，所以短时间内的连续动作永远只会触发一次。
函数节流(throttle): 短时间内连续触发事件，但在 n 秒内只会执行一次，也就是说即预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期，所以节流会稀释函数的执行频率。

二、JS 版本

<body>
  <!-- 输入框 -->
  <input type="text" id="my-input">
  <!-- JS -->
  <script>
    // 防抖
    function debounce (fn, delay) {
      var delay = delay || 200
      var timer = null
      return function () {
        var that = this
        var args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(function () {
          timer = null
          fn.apply(that, args)
        }, delay)
      }
    }
    
    // 节流
    function throttle (fn, interval) {
      var last = null
      var timer = null
      var interval = interval || 200
      return function () {
        var that = this
        var args = arguments
        var now = +new Date()
        if (last && now - last < interval) {
          clearTimeout(timer)
          timer = setTimeout(function () {
            last = now
            fn.apply(that, args)
          }, interval)
        } else {
          last = now
          fn.apply(that, args)
        }
      }
    }

    // 输入监听
    const input = document.getElementById('my-input')
    input.oninput = throttle(function (e) {
      console.log(e.target.value)
    }, 500)
  </script>
</body>

三、Vue 版本

<template>
  <!-- input -->
  <input type="text" @input="onInput">
</template>

<script>
// vue 自带插件，如果没有自带自行安装（$ npm i -save lodash）
import _ from 'lodash'
export default {
  methods: {
    // 防抖
    onInput: _.debounce(function (e) {
      console.log(e.target.value)
    }, 500),
    // 节流
    onInput: _.throttle(function (e) {
      console.log(e.target.value)
    }, 500)
  }
}
</script>