• 售前

  • 售后

热门帖子
入门百科

vue实现防抖的实例代码

[复制链接]
白刃玄衣及 显示全部楼层 发表于 2021-10-25 18:42:59 |阅读模式 打印 上一主题 下一主题
防抖:防止重复点击触发变乱

起首啥是抖? 抖就是一哆嗦!原本点一下,如今点了3下!不知道老铁脑筋是不是很有画面感!哈哈哈哈哈哈
典型应用就是防止用户多次重复点击哀求数据。
vue实现防抖方法如下:
1.起首新建一个debounce.js代码如下
  1. const debounce=function(fn, delay){
  2.         let timer = null
  3.         return function(){
  4.                 let content = this;
  5.                 let args = arguments;
  6.                 if(timer){
  7.                         clearTimeout(timer)
  8.                 }
  9.                 timer = setTimeout(()=>{
  10.                         fn.apply(content,args)
  11.                 }, delay)
  12.         }
  13. }
  14. export default debounce
复制代码
2.在必要防抖的vue文件中引入debounce,内容如下;这是一个输入框的500ms的防抖
  1. <template>
  2. <div class="main">
  3.   <el-input v-model="input" @change="changeSeletc" placeholder="请输入内容"></el-input>
  4. </div>
  5. </template>
  6. <script>
  7. import debounce from "../utils/debounce"
  8. export default {
  9.   name: "alarm",
  10.   data(){
  11.    return{
  12.     input: ''
  13.    }
  14.   },
  15.   methods:{
  16.    changeSeletc:debounce(function () {
  17.     console.log(this.input)
  18.    },500),
  19.   }
  20. }
  21. </script>
  22. <style scoped>
  23. </style>
复制代码
3.效果如下图

总结

到此这篇关于vue实现防抖的文章就介绍到这了,更多相干vue实现防抖内容请搜刮脚本之家从前的文章或继承欣赏下面的相干文章希望大家以后多多支持脚本之家!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作