这种方法,防抖和节流开发效率极大提升

在现代前端开发中,处理高频事件的优化不仅仅是提升应用性能的必要手段,更是提升开发效率的重要策略。防抖(Debounce)和节流(Throttle)作为两种常见且有效的优化技术,能够有效控制事件触发的频率,减少不必要的资源消耗。通过合理应用防抖和节流,开发者可以显著提高代码的执行效率,减少因频繁事件触发导致的性能瓶颈,从而大大提升开发效率。

  • 在Vue项目中,这些技术尤为重要。防抖可以确保在高频率事件触发中,只执行最后一次操作,比如用户输入的实时搜索功能;
  • 而节流则可以确保事件在规定的时间间隔内只执行一次,比如页面滚动或窗口调整大小时的性能优化。
  • 在本文中,我们将详细讲解防抖和节流的原理,并结合具体的Vue实例,展示如何高效地实现这些技术,帮助开发者在实际项目中提升开发效率和用户体验。
  • 通过这些实战经验,您将掌握如何在复杂的前端环境中,灵活运用防抖和节流技术,实现更高效、更流畅的应用开发。

 2613354b4ce645669451ac04891fd032.png

目录

1 安装和引入

2 防抖的调用学习 

3 节流的调用学习

4 使用方法总结 


 

1 安装和引入

执行安装命令

npm i js-tool-big-box

项目中引入(Vue项目),工具包对外提供了 eventBox 对象,可以用来调用防抖和节流的方法。

import { eventBox } from 'js-tool-big-box';

2 防抖的调用学习 

防抖呢,比如说一个人频繁在输入框输入值,然后我们需要去判断它输入的手机号对不对,邮箱对不对,后者拿着这个输入值去发送Ajax请求去查东西,肯定不能输入一个字符就赶紧拿着去查,对吧,所以就需要防抖。

防抖呢就是设定一个时间值,比如2秒,你在这2秒内有操作,就取消,一直到2秒后没有操作了,再去执行任务。

比如等电梯,早上着急打卡的同学们,越着急,越有人按电梯,有人按一下就得等5秒,除非有人急的不行了,按了关闭按钮。所以,等5秒,没人上了,电梯关闭,开始往上走。如果第4秒又有人按按钮,他进来了,那么就再等5秒吧。

<template>
  <div>
    <input @keyup="handleChange" v-model="inputVal" />
  </div>
</template>

<script>
import { eventBox } from 'js-tool-big-box';

export default {
  name: 'dj',
  data () {
    return {
      inputVal: ''
    }
  },

    created() {
        this.myDebounce = eventBox.debounce((data) => {
          this.sendAjax(data);
        }, 2000);
      },

methods: {
    handleChange(event) {
      const val = event.target.value;
      this.myDebounce(val);
    },
    sendAjax(data) {
      console.log('发送时间::', new Date().getTime());
      console.log('发送请求:', data);
    },
  }
}
</script>

 

b18904a3ad4c43e7b940fe4e7ce18193.png

 

在截图中,我分别输入了1   222 333 ,其中222和333是频繁输入的,然后只调用了一次

 

3 节流的调用学习

节流呢,就像坐火车,人来人往的车站,川流不息的人群,但火车有时刻表,隔多久一趟车。下拉刷新就正好用到这个地方。

<script>
import { eventBox } from 'js-tool-big-box';

export default {
  name: 'dj',
  data () {
    return {
      inputVal: ''
    }
  },
  created() {
    this.myThrottle = eventBox.throttle((data) => {
      this.sendAjax(data);
    }, 2000);
  },
  methods: {
    handleChange(event) {
      const val = event.target.value;
      this.myThrottle(val);
    },
    sendAjax(data) {
      console.log('发送时间::', new Date().getTime());
      console.log('发送请求:', data);
    },
  }
}
</script>

0086395c7a8e40e6a40ee25752b6f5a9.png

看这个时间戳打印的,我一直在频繁输入,然后他隔一段时间才执行一次,不错不错,节流了。

4 使用方法总结 

方法名返回值入参
debounce传入的执行方法

第一个参数必填,表示需要执行的方法,

第二个参数非必填,表示需要延迟执行的时间,可不传,默认300毫秒

throttle传入的执行方法

第一个参数必填,表示需要执行的方法,

第二个参数非必填,表示需要延迟执行的时间,可不传,默认300毫秒

 

  • 21
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 15
    评论
防抖(Debounce)和节流(Throttle)是前端开发中常用的性能优化技术,用于控制函数的执行频率,避免在短时间内连续触发某事件导致频繁计算或操作。这两种方法主要应用于处理用户输入、滚动事件或其他可能导致大量计算的场景。 **1. 防抖(Debounce)**: 防抖会在事件触发后等待一段时间(通常是几毫秒到几百毫秒),如果在这段时间内事件不再触发,才会执行回调函数。这样可以防止用户在短时间内连续触发多次事件而执行过多次不必要的操作。 ```javascript function debounce(func, delay) { let timeoutId; return function() { const context = this; const args = arguments; clearTimeout(timeoutId); timeoutId = setTimeout(() => { func.apply(context, args); }, delay); }; } ``` **2. 节流(Throttle)**: 节流则是设置一个固定的时间间隔,在这个间隔内,无论事件触发了多少次,只执行一次回调。如果在下一次执行之前,新的事件触发超过了设定的时间间隔,那么就重新开始计时。 ```javascript function throttle(func, delay) { let lastExecuteTime = 0; return function() { const context = this; const args = arguments; const now = Date.now(); if (now - lastExecuteTime > delay) { func.apply(context, args); lastExecuteTime = now; } }; } ``` **相关问题--:** 1. 防抖节流的主要区别是什么? 2. 防抖通常用在哪些场景? 3. 节流的优点是什么? 4. 如何根据实际需求选择防抖节流
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

经海路大白狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值