您现在的位置是:群英 > 开发技术 > web开发
vue防抖的通俗理解是什么,实际中如何应用
Admin发表于 2022-09-16 17:55:41804 次浏览
在这篇文章中我们会学习到关于“vue防抖的通俗理解是什么,实际中如何应用”的知识,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望对大家学习或工作能有帮助。下面就请大家跟着小编的思路一起来学习一下吧。

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

如何快速入门VUE3.0:进入学习

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

谈到vue项目的优化,防抖节流真心需要了解一下,下面就来聊聊防抖。

防抖(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:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        输入内容:<input type="text"  @keyup="deb"/>
        <div> 输入次数:{{num}}</div>
    </div>
    <script>
        let time
        var app=new Vue({
            el:'#app',
            data:{
                num:0,
            },
            methods:{
                deb: function () {
let that = this
if (time) {
clearTimeout(time)
}
time = setTimeout(function () {
                            that.num++
console.log('输入了'+that.num+'次')
time = undefined;
}, 2000)
}
            }
        })
    </script>
</body>
</html>

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

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

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

    <div id="app">
        输入内容:<input type="text" class="input"  @keyup.enter="deb"/>
        <div> 输入次数:{{num}}</div>
    </div>

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

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

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


以上就是关于“vue防抖的通俗理解是什么,实际中如何应用”的相关知识,感谢各位的阅读,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注群英网络,小编每天都会为大家更新不同的知识。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: 防抖
相关信息推荐
2021-12-18 17:48:40 
摘要:这篇文章我们来了解一下小程序页面跳转传参方式,下文介绍了几种方式,都有示例代码供大家参考,有需要的朋友可以了解看看,接下来我们就一起学习一下吧。
2022-05-20 17:25:56 
摘要:下面由golang教程栏目给大家介绍go 的自动重载工具安装,希望对需要的朋友有所帮助!
2022-01-08 17:43:14 
摘要:这篇文章我们来了解PHP中trim函数的相关内容,trim是一种内置函数,可以去除字符串首尾处的空白字符或者其他字符,接下来我们就具体的了解一下trim函数的作用和用法,下文示例有一定的参考价值,有需要的朋友可以了解看看,接下来就跟随小编来一起学习一下吧!
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部