实现防抖函数并支持第一次立刻执行(vue3 + ts环境演示)

1、先看一效果
在这里插入图片描述

2、实现思路:

  1. 使用定时器setTimeout和闭包实现常规防抖功能;
  2. 增加immediate字段控制第一次是否执行一次函数(true or false);
  3. 增加一个flag标识,在第一次执行时,将标识标识为true,同时通过使用定时器设置flag=false(防止用户是一次一次地触发,导致下一轮第一次无法触发事件);
  4. 在第二次触发回调函数时将flag设置false,为了第二轮触发防抖时,第一次也会执行函数。

3、防抖函数实现:

// 自定义防抖函数,支持传入等待时间(wait)、立即执行标识(immediate)等参数。
export const customDebounce = function (
  fn: Function,
  wait = 500,
  immediate: boolean
) {
   
  let timeID: number | null;
  let flag = false;
  return function (...args: any[
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值