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


Posted in Javascript onSeptember 05, 2019

前言

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

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

如果对防抖函数原理有疑惑,请点击链接跳转到关于防抖函数讲解的博文:https://3water.com/article/169350.htm

防抖函数一般是用于频繁触发事件,而我们只需要它触发一次的场景,比如:输入框的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);
  };
 }

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

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

 

我们可以看到我们打印的结果只输出了一次,如果不使用防抖函数,这里是会触发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、防抖函数可适用于点赞、输入框校验、取消点赞、创建订单等不可让用户同一时间内频繁进行操作的场景;

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
js 幻灯片的实现
Dec 06 Javascript
js自执行函数的几种不同写法的比较
Aug 16 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 #Javascript
React路由鉴权的实现方法
Sep 05 #Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 #Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 #Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 #Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 #Javascript
JavaScript基础之this和箭头函数详析
Sep 05 #Javascript
You might like
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
求职信结尾怎么写
2014/05/26 职场文书
企业宣传标语
2014/06/09 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
辩护词格式
2015/05/22 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫