vue实现防抖,vue自定义指令防抖

  vue实现防抖,vue自定义指令防抖

  而防抖和节流的作用是防止函数被多次调用。下面这篇文章主要介绍vue功能防抖节流的正确使用方法。有需要的朋友可以参考一下。

  

前言

  1.防抖(去抖):该功能在高频事件触发后N秒钟才会执行一次。如果N秒后再次触发高频事件,将重新计算时间。

  比如就像百度搜索里,每次输入后都会弹出联想词。这种控制联想词的方法,不是输入框内容一变就能触发的,而是必须在你完成输入一段时间后才能触发。

  Thorttle:由高频事件触发,但n秒才执行一次,所以节流会稀释函数的执行频率。

  例如,一个函数被调度为仅在大于或等于执行周期时执行,并且在该周期内的调用不被执行。这就好比你在淘宝上抢购限量畅销商品的时候,不停的下单,不停的刷新,但总有一段时间,你的下单没有任何效果。这里用节流,就是怕点的太快造成系统的bug。

  2.区别:镜像稳定器把多次执行变成最后一次执行,节流把多次执行变成常规执行。

  防抖和功能节流一直是面试的话题。大家可能对函数防抖和节流的写法比较熟悉,但是有一个小插曲是关于在vue中使用函数防抖或者节流的。

  

vue中的正确使用姿势

  在这个地方,我相信很多人会直接定义函数,然后在函数中使用去抖,这是不对的。

  为什么?这和vue的事件绑定原理有关,这里就不赘述了。如果直接在函数体内部使用,最终结果是匿名的立即执行函数,这是错误的。详细参考

  

原理

  函数的防抖

  函数的防抖就是执行函数需要多长时间。我们可以理解为这样的生活场景(坐电梯)。点击开门按钮后,电梯会打开,然后在等待一段时间关闭。但是,如果在等待期间有人再次点击开门按钮,那么电梯将不会开始工作,直到等待时间结束,没有人点击开门按钮。

  继续等待关门时

  第一次非立即执行

  导出函数去抖(f,t){

  let定时器;

  返回(.arg)={

  clearTimeout(定时器);

  timer=setTimeout(()={

  f(.arg)

  },t)

  }

  }

  代码书写

  对于某些场景,我不需要等待第一次,而是需要立即执行,比如:打开控制台获取窗口大小(这里我们需要一直改变窗口大小,等到停下来再获取窗口视图大小)。

  导出函数deboutofirstexe(f,t){

  设timer,flag=true

  返回(.args)={

  如果(标志){

  f(.args);

  flag=false

  }否则{

  clearTimeout(定时器);

  timer=setTimeout(()={

  f(.args);

  flag=true

  },t)

  }

  }

  }

  第一次立即执行

  导出函数去抖(f,t,im=false){

  设timer,flag=true

  返回(.args)={

  //需要立即执行的情况

  如果(im){

  如果(标志){

  f(.args);

  flag=false

  }否则{

  clearTimeout(定时器);

  timer=setTimeout(()={

  f(.args);

  标志=真

  },t)

  }

  }否则{

  //非立即执行的情况

  clearTimeout(定时器);

  timer=setTimeout(()={

  f(.参数)

  },t)

  }

  }

  }

  合并版本我们的代码级别在哪里可以使用它?

  发送网络氢赞时,勾选输入框,取消赞,创建订单等。如果我们连续点击按钮,我们可能会发送多个请求。这种背景不允许。每次鼠标调整大小/滚动时触发统计事件。

  函数防抖

  作为函数防抖的兄弟,函数节流的原理也差不多。我只会在某个时间段执行一次函数节流。

  第一次非立即执行

  出口函数油门(f,t){

  设timer=true

  返回(.arg)={

  如果(!计时器){

  返回;

  }

  定时器=假;

  setTimeout(()={

  f(.arg);

  timer=true

  },t)

  }

  }

  效果中我们点击了很多次,但是只执行了四次,因为我规定的时间是1000ms执行一次。这也减少了执行的次数。

  第一次立即运行该版本

  导出函数throttlesfirstext(f,t) {

  设flag=true

  返回(.args)={

  如果(标志){

  f(.args);

  flag=false

  setTimeout(()={

  标志=真

  },t)

  }

  }

  }

  这里我们看到第一次点击将立即执行。

  合并版

  出口函数节流(f,t,im=false){

  设flag=true

  返回(.args)={

  如果(标志){

  标志=假

  即时消息(.参数)

  setTimeout(()={

  !即时消息(.参数)

  标志=真

  },t)

  }

  }

  }

  函数节流

  DOM (mousemove)拖放功能的实现

  搜索关联(键盘输入)

  计算鼠标移动的距离(mousemove)

  画布模拟画板功能(鼠标移动)

  射击游戏的mousedown/keydown事件(单位时间只能发射一颗子弹)

  监控滚动事件,确定是否在页面底部自动加载更多:添加去抖滚动后,只有在用户停止滚动后,才会确定是否到达页面底部;如果是throttle,只要页面滚动,就会间隔判断。

  

总结

  关于vue功能防抖和节流的正确使用,本文到此为止。更多关于vue功能防抖和节流的信息,请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: