节流、防抖函数的封装及使用

CHENLING302

已于 2024-06-19 15:12:48 修改

阅读量204

点赞数 6

文章标签：前端 javascript 开发语言

于 2024-06-19 15:11:39 首次发布

本文链接：https://blog.csdn.net/weixin_61001537/article/details/139803933

版权

创建一个文件，命名为throttlingAntiShake.js

// func是用户传入需要节流的函数
// delay是间隔
// 节流函数
// 并发执行了100次所以仅执行了第一次，后续的被节流掉了
export const throttle = (func, delay) => {
  // 缓存一个定时器
  let timer = null;
  // 这里返回的函数是每次用户实际调用的节流函数
  return function () {
    // 判断timer是否有值 如果没有则说明定时器不存在可继续执行
    if (!timer) {
      timer = setTimeout(() => {
        console.log('节流函数');
        func();
        timer = null;
      }, delay)
    }
  }
}

// 防抖函数
// 并发执行了100次所以仅执行最后一次，前面的执行均被防抖掉了
export function debounce(func, delay) {
  let timer = 0;
  return function () {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      console.log('防抖函数');
      func();
    }, delay)
  }
}

页面使用如下：

import { debounce, throttle } from '@/utils/throttlingAntiShake';

// 搜索
  const handleInputMsg = throttle(realClickHandler, 1000);
  // 需要节流的函数
  function realClickHandler() {
    if (searchValue.value.length) {
      msgData.messageListParams.name = searchValue.value;
      msgData.messageListData = [];
    } else {
      delete msgData.messageListParams.name;
    }
    initMessageList();
  }