vue防抖的通俗理解是什么，怎么实现-群英

您现在的位置是：群英 > 开发技术 > web开发

vue防抖的通俗理解是什么，怎么实现

Admin发表于 2022-07-30 17:30:16758 次浏览

上一篇：组件vue的特性架构和功能是怎样的呢

下一篇： vue只有一个根标签的原因是什么？

今天就跟大家聊聊有关“vue防抖的通俗理解是什么，怎么实现”的内容，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

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

本教程操作环境：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防抖的通俗理解是什么，怎么实现”的内容了，通过以上内容的阐述，相信大家对vue防抖的通俗理解是什么，怎么实现已经有了进一步的了解，如果想要了解更多相关的内容，欢迎关注群英网络，群英网络将为大家推送更多相关知识点的文章。

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

标签：防抖

上一篇：组件vue的特性架构和功能是怎样的呢

下一篇： vue只有一个根标签的原因是什么？