博客
关于我
vue实现手机号码的校验(防抖函数的应用场景)
阅读量:418 次
发布时间:2019-03-06

本文共 1914 字,大约阅读时间需要 6 分钟。

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

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

  如果对防抖函数原理有疑惑,请点击链接跳转到关于防抖函数讲解的博文:

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

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

  HTML视图层代码:

 

  
您输入的手机号码格式正确

 

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

  JS数据逻辑层代码:

  

//这里我们要引入一个文件,文件里面是防抖函数的是实现       

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

 

转载地址:http://pfuuz.baihongyu.com/

你可能感兴趣的文章
mysql5.7安装
查看>>
mysql5.7性能调优my.ini
查看>>
MySQL5.7新增Performance Schema表
查看>>
Mysql5.7深入学习 1.MySQL 5.7 中的新增功能
查看>>
Webpack 之 basic chunk graph
查看>>
Mysql5.7版本单机版my.cnf配置文件
查看>>
mysql5.7的安装和Navicat的安装
查看>>
mysql5.7示例数据库_Linux MySQL5.7多实例数据库配置
查看>>
Mysql8 数据库安装及主从配置 | Spring Cloud 2
查看>>
mysql8 配置文件配置group 问题 sql语句group不能使用报错解决 mysql8.X版本的my.cnf配置文件 my.cnf文件 能够使用的my.cnf配置文件
查看>>
MySQL8.0.29启动报错Different lower_case_table_names settings for server (‘0‘) and data dictionary (‘1‘)
查看>>
MYSQL8.0以上忘记root密码
查看>>
Mysql8.0以上重置初始密码的方法
查看>>
mysql8.0新特性-自增变量的持久化
查看>>
Mysql8.0注意url变更写法
查看>>
Mysql8.0的特性
查看>>
MySQL8修改密码报错ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
查看>>
MySQL8修改密码的方法
查看>>
Mysql8在Centos上安装后忘记root密码如何重新设置
查看>>
Mysql8在Windows上离线安装时忘记root密码
查看>>