vue防抖实例分析

本篇内容介绍了“vue防抖实例分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

创新互联是一家专注于成都网站制作、成都网站设计与策划设计,仪征网站建设哪家好?创新互联做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:仪征等地区。仪征做网站价格咨询:18982081108

在vue中,防抖是指在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时;也就是说:当持续触发某事件时,一定时间间隔内没有再触发事件时,事件处理函数才会执行一次,如果设定的时间间隔到来之前,又一次触发了事件,就重新开始延时。

vue防抖实例分析

本教程操作环境:windows7系统、vue3版,DELL G3电脑。

防抖(debounce)

在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时;

解释:当持续触发某事件时,一定时间间隔内没有再触发事件时,事件处理函数才会执行一次,如果设定的时间间隔到来之前,又一次触发了事件,就重新开始延时。

通俗理解,就是我们在点击请求或者点击加载等过程中,只需要点击一次,但由于请求慢,点击了好多次,导致多次请求,防抖就是在点击了好多次之后的最后一次才会请求。

案例1:

持续触发scroll事件时,并不立即执行handle函数,当1000毫秒内没有触发scroll事件时,才会延时触发一次handle函数。

function debounce(fn, wait) {
 let timeout = null
 return function() {
  if(timeout !== null) clearTimeout(timeout)   
  timeout = setTimeout(fn, wait);
 }
}
function handle() {  
 console.log(Math.random())
}
window.addEventListener('scroll', debounce(handle, 1000))

addEventListener的第二个参数实际上是debounce函数里return回的方法,let timeout = null 这行代码只在addEventListener的时候执行了一次 触发事件的时候不会执行,那么每次触发scroll事件的时候都会清除上次的延时器同时记录一个新的延时器,当scroll事件停止触发后最后一次记录的延时器不会被清除可以延时执行,这是debounce函数的原理

案例2:




    
    
    
    防抖



    
        输入内容:
        
 输入次数:{{num}}
    
    

效果图:(输入一次文字2秒后执行,多次输入,还是执行一次,输入次数只加1):

全局定义的time是undefind , 在连续输入的过程中,多次触发keyup事件,定时器每次都会重新渲染,仅当输入间隔超过(或等于)所设时间2秒时,num++才会执行。

vue防抖实例分析

搭配键盘修饰符:(.enter为例)

    
        输入内容:
        
 输入次数:{{num}}
    

这样连续按回车后,也只会触发一次 输入 ,每次按回车间隔设置的两秒,才会触发一次。

所以,考虑到会出现连续点击了提交按钮,连续触摸的情况,防抖是很有必要的。

当然,也有另外的解决方式,比如项目里用的是控制按钮的方式,点击保存,在请求接口返回200之前,按钮禁止使用,这里就不会出现重复点击了。

“vue防抖实例分析”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


网站名称:vue防抖实例分析
标题URL:http://scyanting.com/article/jdpijh.html

其他资讯