JS 函数节流和函数防抖的区别（JS 与 Vue 用法）-阿里云开发者社区

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

2023-08-03 82

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

一、区别

防抖与节流的相同点: 为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
函数防抖(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>

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

一、区别

二、JS 版本

三、Vue 版本

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

一、区别

二、JS 版本

三、Vue 版本

热门文章

最新文章

相关课程

相关电子书

相关实验场景