JS实现防抖节流

1.在pages目录之外定义一个utils文件目录，里面创建一个utill.js文件

  1. //防抖函数 立即执行版本
  2. let debounceNow = function (func,wait){
  3.   let timeout
  4.   let self=this   //为了保证下面箭头函数中的this指向不受影响
  5.   let args = arguments;
  6.   return function(){
  7.     if(timeout) clearTimeout(timeout)
  8.     var callNow = !timeout;
  9.     console.log(callNow)
  10.     if (callNow) func.apply(self, args)
  11.     timeout = setTimeout(() => {
  12.       timeout = null;
  13.     }, wait)
  14.   }
  15.   //刚开始timeout为undefined，callNow值为true，进入了判断，执行了一次func，所以会执行第一次点击的函数，然后进入定时器，在定时器执行完之后timeout才会为null，否则timeout一直都有settimeout的值
  16.   // callNow就为false，一直都进不去判断，一直都不执行函数,直到定时器执行完
  17. }
  18. //防抖函数 非立即执行
  19. let debounce = function (fn,time){
  20.   var timer=null;
  21.   return function(){
  22.     //清除上一次延时器
  23.     clearTimeout(timer);
  24.     //重新设置新的延时器，每次点击都会清空定时器，重启一个定时器，所以只会触发最后一次func函数
  25.     timer=setTimeout(function(){
  26.       console.log(this)
  27.       fn.apply(this);//将传进的fn的this指向window，并执行fn
  28.     },time);
  29.   }
  30. }
  1. //节流函数 时间戳版本
  2. function throttleDate(fn,time){
  3.   //初始化时间
  4.   var lasttime=0;
  5.   return function(){
  6.     //记录当前函数触发时间
  7.     var nowtime = Date.now();
  8.     if(nowtime-lasttime > time){
  9.       //如果当前函数触发时间 - 上一次函数触发时间 > 设定的时间
  10.       fn.call(this);
  11.       //同步函数时间
  12.       lasttime=nowtime;
  13.     }
  14.   }
  15. }
  16. // 刚开始获取到上一次函数被触发时间，再拿到点击的时间戳，如果点击的时间戳 - 上一次函数触发时间 > 设定的时间 才会触发函数，实现了在N秒内多次点击只会执行一次的效果
  18. //节流函数 定时器版本
  19. function throttleSetTime(fn,time){
  20.   let canUse = true ; // 设置一个开关
  21.   return function(){
  22.     if(!canUse ){ return false } // 如果开关已经关掉了就不用往下了
  23.     // if(canUse) fn.apply(this,arguments)//fn放这里是立即执行
  24.     canUse  = false  // 利用闭包刚进来的时候关闭开关
  25.     setTimeout( ( ) => {
  26.       fn.apply(this,arguments)//fn放这里是非立即执行，定时器结束才执行
  27.       canUse = true // 执行完才打开开关
  28.     },time)
  29.   }
  30.   // 刚开始canUse为true，不会进入return，然后将canUse重置为false,进入了定时器，在定时器的时间期限之后，才会将canUse重置为true,canUse为true之后，之后的点击才会生效
  31.   // 在定时器的时间期限内，canUse还没有重置为true，会一直进入return，就实现了在N秒内多次点击只会执行一次的效果
  32. }

2.将这两个函数暴露出去 module.pxports={ throttleSetTime, debounceNow } 3.页面使用时候 import utilFn from ‘@/utils/utils.js’ // 在点击事件使用 click:utilFn.debounceNow(function(){ console.log(‘防抖节流’) })