原始登录和防抖登录，用简单的Vue自定义指令测试原始登录和防抖登录

最新推荐文章于 2024-05-14 10:07:05 发布

一个想要翻身的咸鱼*^*

最新推荐文章于 2024-05-14 10:07:05 发布

阅读量122

点赞数

分类专栏： Vue 文章标签： vue 前端框架 Powered by 金山文档

本文链接：https://blog.csdn.net/qqqddd_yyqx/article/details/129639459

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

原始登录

原始登录是用户一直点击按钮，会发送多次请求，如果一直点击登录按钮造成请求频繁，计算过多。用console.log可以测试一下原始登录的效果。

<button @click="login">原始登录</button>

 methods:{
                login(){
                    console.log("登录成功")
                }
            },

会发现点击多少次，前面就会显示多少次，因此为了防止频繁点击，可以使用防抖登录。

防抖登录

为了防止过度操作，可以使用防抖登录，用延时器setTimeout设置点击时间

  <button v-debounce="login">防抖登录</button>

directives:{
                debounce:{
                    mounted(el,binding){
                        let timer=null
                        el.addEventListener('click',()=>{
                        if(timer){
                            clearTimeout(timer)
                        }
                       timer= setTimeout(()=>{
                            binding.value()
                        },1000)//1秒内多次点击只算一次
                    })
                }
                }
            }

完整代码

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
    <template id="root">
        <div>
            <button @click="login">原始登录</button>
            <button v-debounce="login">防抖登录</button>
        </div>
    </template>
    <script>
        const app=Vue.createApp({
            template:"#root",
            methods:{
                login(){
                    console.log("登录成功")
                }
            },
            directives:{
                debounce:{
                    mounted(el,binding){
                        let timer=null
                        el.addEventListener('click',()=>{
                        if(timer){
                            clearTimeout(timer)
                        }
                       timer= setTimeout(()=>{
                            binding.value()
                        },500)
                    })
                }
                }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>

最后，这只是一个关于防抖登录的一个Vue小测试，对于大多数软件是防止不了的😂