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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。