防抖节流工具型方法的封装

封装防抖工具型方法

/**
 * @description: 防抖函数的封装
 * @param {Function} callback : 要执行的代码
 * @param {String} time : 要倒计时的时间(停止后多久执行逻辑代码)
 * @return: 返回防抖函数
 */
function fandou (callback, time) {
  let timer = null  // 声明一个将要存放定时器的变量
  return function () {  // 返回一个函数
    clearTimeout(timer)    // 清空定时器
    timer = setTimeout(() => {    // 给变量赋予倒计时逻辑
      callback()      // 调用传进来的回调函数
    }, time)      // 等待执行逻辑代码的时间为传入的 time 参数
  }
}

封装节流工具型方法 1

/**
 * @description: 节流函数的封装
 * @param {Function} callback : 要执行的代码
 * @param {String} time : 要倒计时的时间(停止后多久执行逻辑代码)
 * @return: 返回节流函数
 */
function jieliu (callback, time) {
  let timer = null  // 声明一个将要存放定时器的变量
  let beginTime = Data.now()  // 获取开始时的时间戳
  return function () {  // 返回一个工具方法
    clearTimeout(timer)    // 清除定时器
    let space = Data.now() - beginTime    // 获取( 当前时间戳(触发事件时) - 开始时间戳 ) 
    if(space >= time){    // 判断是否 大于等于指定时间
	  callback()	  // 执行传入的逻辑代码
	  beginTime = Data.now()	  // 跟新开始时间
    } else {	// 触发事件间隔小于 传入的时间
	  timer = setTimeout(() => {	  // 设置定时器 进入倒计时
		callback()		// 执行传入的逻辑代码
	  }, tiem)	  // 等待时间为 传入的 time
    }
  }
}

封装节流工具型方法 2

/**
 * @description: 节流函数的封装
 * @param {Function} callback : 要执行的代码
 * @param {String} time : 要倒计时的时间(停止后多久执行逻辑代码)
 * @return: 返回节流函数
 */
function jieliu (callback, time) {
  let isPlay = false    // 声明一个 开关  (关闭的开关 -> 可以理解成要打游戏 现在false是还没有进入对局 此时可以开始新的游戏对局)
  return function () {  // 返回节流方法
	if(!isPlay) {	// 判断开关状态
	  isPlay = true	  // 改变开关状态 (true -> 此时已经开始游戏对局 就不能在开始新的游戏对局)
	  setTimeout(() => {	  // 定时器逻辑
		callback()	    // 执行 传入的逻辑代码
		idPlay = false		// 执行完毕 关闭开关 (对局结束 可以开启下一把)
	  }, time)		// 触发事件之后多久执行逻辑代码
    }
  }
}