Vue中使用防抖与节流的方法

目录
  • 何为防抖/节流
    • 防抖(debounce)
    • 节流(throttle)
    • 页面使用
    • 使用场景
  • 总结

何为防抖/节流

首先先说说何为防抖与节流

防抖(debounce)

防抖就是一段时间内会多次触发相同的事件,而我们的目的却只是想让他们在不触发的多久以后再执行该事件,例如鼠标移动事件(mousemove)、输入框变更事件(change)等等,这个时候我们就需要一个方法去控制他,一段时间内没执行该事件后,执行该事件,即为防抖

节流(throttle)

节流就是短时间内会多次触发相同的事件,而我们的目的却只是想让他们既定时间内只触发一次,例如滚轮事件(scroll)、鼠标点击事件(click)等等,这个时候我们就需要一个方法去控制他,一段时间(0.5S/1S)之内只能触发一次事件,即为节流

防抖(debounce)

// 防抖
export default function debounce(fn, time) {
  time = time || 200
  // 定时器
  let timer = null
  return function(...args) {
    var _this = this
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function() {
      timer = null
      fn.apply(_this, args)
    }, time)
  }
}

节流(throttle)

// 节流
export default function throttle(fn, time) {
  let timer = null
  time = time || 1000
  return function(...args) {
    if (timer) {
      return
    }
    const _this = this
    timer = setTimeout(() => {
      timer = null
    }, time)
    fn.apply(_this, args)
  }
}

页面使用

直接就用click的点击速度模拟触发事件的频率了

<el-button @click="clickDebounce">防抖</el-button>
<el-button @click="clickThrottle">节流</el-button>

//引用定义好的JS方法
import debounce from '@/utils/debounce'
import throttle from '@/utils/throttle'
methods: {
    clickDebounce: debounce((e) => {
      console.log(1)
    }, 1000),
    clickThrottle: throttle((e) => {
      console.log(2)
    }, 1000),
}

使用场景

使用场景根据业务需求可以有很多很多 简单举两个例子

防抖(debounce)搜索框自动搜索的时候,可搜索下拉框远程搜索的时候，用户在没输入完的情况下，防抖可以节约请求资源。
鼠标移动的时候,鼠标停下来不动再执行方法

节流(throttle)滚动页面的时候

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • Vue中函数防抖节流的理解及应用实现

    防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算. 一.函数防抖 定义 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时. 实现原理 函数防抖的基本思想是设置一个定时器,在指定时间间隔内运行代码时清楚上一次的定时器,并设置另一个定时器,知道函数请求停止并超过时间间隔才会执行. 使用场景 文本框输入搜索(连续输入时避免多次请求接口) 代码实现 /** * 函数防抖

  • 在Vue中使用防抖与节流,及this指向的问题

    目录 使用防抖与节流,及this指向问题 一顿操作后 使用防抖函数所遇见的坑 正常写法 使用 Vue中写法使用 Vue中的watch的防抖简写 使用防抖与节流,及this指向问题 最近项目中遇到了防抖与节流问题,搜索了很多文章都有this指向的问题,最后不得不采取一种很low的方法 data中定义isFirst为1 if (this.isFirst < 2){     this.isFirst = 2     setTimeout(() => {         this.isFirst =

  • vue函数防抖与节流的正确使用方法

    vue函数防抖与节流的正确使用方法

    前言 1.防抖(debounce):触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间 举例:就好像在百度搜索时,每次输入之后都有联想词弹出,这个控制联想词的方法就不可能是输入框内容一改变就触发的,他一定是当你结束输入一段时间之后才会触发. 节流(thorttle):高频事件触发,但在 n 秒内只会执行一次,所以节流会稀释函数的执行频率 举例:预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行.就好像你在淘宝抢购某一件限量热卖商品时,你不断点刷新

  • Vue中使用防抖与节流的方法

    目录 何为防抖/节流 防抖(debounce) 节流(throttle) 页面使用 使用场景 总结 何为防抖/节流 首先先说说何为防抖与节流 防抖(debounce) 防抖就是一段时间内会多次触发相同的事件,而我们的目的却只是想让他们在不触发的多久以后再执行该事件,例如鼠标移动事件(mousemove).输入框变更事件(change)等等,这个时候我们就需要一个方法去控制他,一段时间内没执行该事件后,执行该事件,即为防抖 节流(throttle) 节流就是短时间内会多次触发相同的事件,而我们的目

  • 在vue中使用防抖和节流,防止重复点击或重复上拉加载实例

    废话不多说,直接上代码吧! /** * 函数防抖 (只执行最后一次点击) * @param fn * @param delay * @returns {Function} * @constructor */ export const Debounce = (fn, t) => { let delay = t || 500; let timer; console.log(fn) console.log(typeof fn) return function () { let args = argum

  • Vue组件中使用防抖和节流实例分析

    在监听频繁触发的事件时,一定要多加小心,比如 用户在输入框打字.窗口大小调整.滚动.Intersection Observer 事件. 这些事件总是被频繁触发,可能 几秒一次.如果针对每次事件都发起 fetch 请求(或类似的行为),那显然是不明智的. 我们需要做的就是减缓事件处理程序的执行速度.这种缓冲技术就是 防抖(debounce) 和 节流(throttle) . 1. 观察者 防抖 我们先从一个简单的组件开始,我们的任务是 将用户输入到 文本框中的文本 输出到控制台: <templat

  • 在vue中使用防抖函数组件操作

    初级 1.先写好防抖函数 /** * @desc 防抖函数 * @param {需要防抖的函数} func * @param {延迟时间} wait * @param {是否立即执行} immediate */ export function debounce(func, wait, immediate) { let timeout return function(...args) { let context = this if (timeout) clearTimeout(timeout) i

  • 详解Java中的防抖和节流

    详解Java中的防抖和节流

    目录 概念 防抖(debounce) 节流(throttle) 区别 Java实现 防抖(debounce) 防抖测试1 防抖测试2 防抖测试简易版 节流(throttle) 节流测试1 彩蛋 解决方法1 解决方法2 概念 防抖(debounce) 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时. 防抖,即如果短时间内大量触发同一事件,都会重置计时器,等到事件不触发了,再等待规定的事件,才会执行函数.而这整个过程就触发了

  • vue中实现在外部调用methods的方法(推荐)

    1.首先定义一个公共的vue组件: var eventHub = new Vue(); 2.在事件当前的组件中,在created中,用$on向公共的组件eventHub传递,translate是自定义的,getCardNum(data)是要在外部调用的方法; eventHub.$on('translate', function (data) { that.getCardNum(data); }); 3.最后在父组件中,注意负组件要用一个变量保存,var vm = new Vue({}): 4.在

  • vue中引用阿里字体图标的方法

    想在vue中引用阿里的iconfont,却出现报错 ,原因是没有对应的loader处理字体文件. 解决办法 1.引入css文件 import 'font-awesome/css/font-awesome.min.css' 2.在webpack.config中配置 { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader' } 总结 以上所述是小编给大家介绍的vue中引用阿里字体图标的方法,希望对大家有所帮助,如果大家有任何疑问请给我留

  • Vue中this.$router.push参数获取方法

    传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效.需要用name来指定页面. 及通过路由配置的name属性访问 在路由配置文件中定义参数: 通过name获取页面,传递params: 在目标页面通过this.$route.params获取参数: 2.Query 页面通过path和query传递参数,该实例中row为某行表格数据 在目标页面通过this.$route

随机推荐