小程序防抖节流方法封装

大祥子
2022-02-24 / 0 评论 / 171 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年05月23日,已超过692天没有更新,若内容或图片失效,请留言反馈。
/*
* @Author: lzx
* @Date: 2022-05-06 13:33:43
* @LastEditors: lzx
* @LastEditTime: 2022-05-06 13:57:06
* @Description: Fuck Bug
* @FilePath: \reconsitution_talk_vant\utils\tool.js
*/
/*函数节流*/
const throttle = (fn, interval) => {
  let enterTime = 0; // 触发的时间
  let gapTime = interval || 500; // 间隔时间,如果interval不传,则默认300ms
  return function () {
    var context = this;
    var backTime = new Date(); // 第一次函数return即触发的时间
    if (backTime - enterTime > gapTime) {
      fn.call(context, arguments);
      enterTime = backTime; // 赋值给第一次触发的时间,这样就保存了第二次触发的时间
    }
  };
}

/*函数防抖*/
const debounce = (fn, interval) => {
  let timer;
  let gapTime = interval || 500; // 间隔时间,如果interval不传,则默认500ms
  return function () {
    clearTimeout(timer);
    var context = this;
    var args = arguments; // 保存此处的arguments,因为setTimeout是全局的,arguments不是防抖函数需要的。
    timer = setTimeout(function () {
      fn.call(context, args);
    }, gapTime);
  };
}

export default {
  throttle,
  debounce
};

// 说明
// 页面引入:import tool from '../../utils/tool'
// 调用示例:
// 防抖
// test1: tool.debounce(function () {
//   console.log('防抖')
// }, 5000)
// 节流
// test2: tool.throttle(function () {
//   console.log('节流')
// }, 5000)
0

评论 (0)

取消