专栏首页Lambda防抖函数的应用

防抖函数的应用

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/pyycsd/article/details/103070504

vue实现手机号码的校验(防抖函数的应用场景)

上一篇博文我们讲到了节流函数的应用场景,我们知道了节流函数可以用在模糊查询、scroller、onresize等场景;今天这篇我们来讲防抖函数的应用场景::

通过上一篇博文的学习,我们知道了防抖函数的原理:只有在事件触发的时候才会延迟加载,如果在延迟加载之前再次触发,则会刷新延迟时间重新延迟,触发次数有且只有触发一次;

如果对防抖函数原理有疑惑,请点击链接跳转到关于防抖函数讲解的博文:https://www.cnblogs.com/dengyao-blogs/p/11436228.html

防抖函数一般是用于频繁触发事件,而我们只需要它触发一次的场景,比如:输入框的oninput事件、button按钮点击事件、点赞等操作场景;

今天我们讲的demo场景是防抖函数实现手机号码校验:

HTML视图层代码:

  <div id="app">
       <input type="text" placeholder="请输入手机号码" v-model="val" @keyup="check"/>
       <div class="box" v-show="statu==true">您输入的手机号码格式正确</div>
   </div>

首先我们视图层代码是一个输入框后面加上一个div作为提示信息,HTML代码很简单就不过多讲解了;

JS数据逻辑层代码:

    //这里我们要引入一个文件,文件里面是防抖函数的是实现
  <script src="test.js"></script>
    <script>
    // 实例化 vue对象
        new Vue({
            el:"#app",
            data:{
        //val是双向数据绑定绑定输入框的值
                val:"",
        //此处状态值是根据状态值的变化来修改后面div的提示信息
                statu:false
            },
        mounted(){

        },
        methods:{
        //check是我们绑定的输入框的@keyup事件,注意这里不能是函数,不然不会触发,必须要是对象
            check:debounce(function(){
          //这里是我们调用方法,也就是我们要做的事情
                this.handle();
                console.log(new Date())
                }),
              handle(){
          //此处输入是为了统计handle事件触发的次数
                  console.log(“函数防抖”);
                 //这里定义校验规则
                  let reg = /^1[3|4|5|7|8][0-9]{9}$/;    
                  //校验手机号规则
           //如果校验不通过会返回false,如果校验通过会返回true
                  if(reg.test(this.val)){
              //修改状态值方便上面的视图层判断展示
                      this.statu=true;
              //动态的修改提示信息
                      document.getElementsByClassName("box").innerHTML="您输入的手机号码格式错误";
                  }else{
                      this.statu=false;
                      document.getElementsByClassName("box").innerHTML="您输入的手机号码格式错误";
                  }
              },
        }
    })

test.js

    function debounce(fn) {   //默认300毫秒
        var timer;
        return function() {
            if(timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
        定时器必须要更改this指向,可以用apply、bind、或者上面用变量转换等方式来进行更改this指向

                fn.apply(this);   // this 指向vue
            }, 1000);
        };
    }

最后,我们的效果图如下(这里只是简单的模拟效果,视图层搭建的不是很美观):

我们可以看到我们打印的结果只输出了一次,如果不使用防抖函数,这里是会触发11次的,因为一共输入了11个字符;假设我们的方法体中是发送ajax和操作DOM呢?为了一个手机号码校验,难道我们要进行11次甚至更多次的ajax请求或者DOM操作吗?如果是那样,我们的程序性能可想而知,所以说防抖函数是一种性能提升方案;

上述讲述的是我们之前常见的cdn方式引入vue,那么我们如何在vue-cli脚手架中使用防抖函数来进行提升性能呢?

vue-cli:

首先我们可以在build文件夹中新建一个js文件,这里我们定义common.js:

common.js

// 函数防抖
export function debounce(fn, delay) {
    // 记录上一次的延时器
    var timer = null;
    var delay = delay || 200;
    return function() {
    //   var args = arguments;
      var that = this;
      // 清除上一次延时器
      clearTimeout(timer)
      timer = setTimeout(function() {
          fn.apply(that)
      }, delay);
    }
  }

注意:我们在vue-cli中自定义方法必须要export抛出,不然组件读取不到

然后我们到我们需要用的文件中来进行引入和使用:

需要使用的组件:

import {debounce} from "../../build/common"

有抛出就一定有引入,我们这里用import来引用common.js文件里面的方法,这里的debounce就是我们用来接收common.js里面方法的变量;

调用方式跟上面的一样:

这里的search是视图层绑定的触发事件,注意这里也需要是对象的形式来调用
methods:{
  Search:debounce(function(){console.log(1234);},1000),  
}

总结:

1、防抖函数和节流函数均属于一种性能优化方案,有效的使用可以提升程序性能,提升用户体验;

2、防抖函数可适用于点赞、输入框校验、取消点赞、创建订单等不可让用户同一时间内频繁进行操作的场景;

原文:https://www.jianshu.com/p/f55343d0bb0f

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微服务网关组件 - Spring Cloud Gateway 扩展(二十五)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    用户1212940
  • 面试题:Spring为什么默认bean为单例?

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    用户1212940
  • Java并发编程

    前奏 1、多线程一定比单线程快吗? 比如一个炉子烤烧饼,一次烤一个快还是轮询烤快? 一次烤多个在切换时就会浪费炉火,所有不一定多个快。 但多个炉火轮询这就...

    用户1212940
  • 吾爱NLP(2)--解析深度学习中的激活函数

    由惑而生,所以我打算总结一下深度学习模型中常用的激活函数的一些特性,方便大家日后为模型选择合适的激活函数。   说到激活函数,就不能不提神经网络或者深度学习,...

    流川枫
  • 巧妙完成二维表的数据匹配

    接下来我将每周分享一个广大网友向我提问的经典问题。 本周问题,如何对二维表进行匹配! 原表格! ? 备注:以上人名,均属虚构,如有雷同!说明有缘!!! 咳...

    用户1332619
  • 1小时精通c++面向对象编程

    重载二元运算符,只显式说明一个参数;该参数为操作数的右操作数,左操作数由this指针(指向调用该成员函数的对象)提供

    mathor
  • 掌握了多态的特性,写英雄联盟的代码更少啦!

    这种机制就叫做“多态”,说白点就是调用哪个虚函数,取决于指针对象指向哪种类型的对象。

    小林coding
  • 盘点机器学习中那些神奇的损失函数

    盘点机器学习中那些神奇的损失函数 这周深圳真的变冷,以前读书的时候,只要天气变到我会冷到哆嗦就知道,快过年了,算算,还有21天,2017就过去了,我在2016年...

    企鹅号小编
  • 机器学习(十六) ——SVM理论基础

    机器学习(十六)——SVM理论基础 (原创内容,转载请注明来源,谢谢) 一、概述 支持向量机(supportvector machine,SVM),是一种分类...

    用户1327360
  • 机器学习(4)——逻辑回归Logistic回归softmax回归

    前言:这里是分类问题,之所以放到线性回归的下面介绍,是因为逻辑回归的步骤几乎是和前面一样的,写出目标函数,找到损失函数,求最小值,求解参数,建立模型,模型评估。...

    DC童生

扫码关注云+社区

领取腾讯云代金券