JS 函数节流和函数防抖的区别(JS 与 Vue 用法)

简介: 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>
相关文章
|
2天前
|
前端开发 JavaScript Java
Java与JavaScript的区别与联系:有人的地方就有江湖,有浏览器的地方就有JavaScript
Java与JavaScript的区别与联系:有人的地方就有江湖,有浏览器的地方就有JavaScript
|
2天前
|
JavaScript 前端开发
JavaScript 闭包:让你更深入了解函数和作用域
JavaScript 闭包:让你更深入了解函数和作用域
|
1天前
|
JavaScript 前端开发
前端 JS 经典:ES6 和 CommonJs 用法
前端 JS 经典:ES6 和 CommonJs 用法
6 0
|
1天前
|
前端开发 JavaScript
前端 JS 经典:i,i++,++i区别
前端 JS 经典:i,i++,++i区别
5 0
|
1天前
|
前端开发 JavaScript
前端 JS 经典:let、const、var 区别
前端 JS 经典:let、const、var 区别
5 0
|
1天前
|
缓存 JavaScript 前端开发
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会
|
2天前
|
JavaScript 前端开发 网络架构
函数柯里化:JavaScript中的高级技巧
函数柯里化:JavaScript中的高级技巧
|
2天前
|
JavaScript 前端开发
探索JavaScript中的let、const和var:区别与使用场景
探索JavaScript中的let、const和var:区别与使用场景
|
2天前
|
Web App开发 JavaScript 前端开发
解决Vue.js Devtools未检测到Vue实例的问题
解决Vue.js Devtools未检测到Vue实例的问题
|
2天前
|
JavaScript 前端开发
JavaScript的`apply`方法:函数的“应用”与“调用”
JavaScript的`apply`方法:函数的“应用”与“调用”