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 相关文章推荐
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
jquery实现下载图片功能
Jul 18 jQuery
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
Javascript实现关闭广告效果
Jan 29 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
咖啡的传说和历史
2021/03/03 新手入门
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
PHP实现事件机制的方法
2015/07/10 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
javascript的内存管理详解
2013/08/07 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
Python发送email的3种方法
2015/04/28 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
python如何更新包
2020/06/11 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
护士求职简历自我评价
2015/03/10 职场文书
个人收入证明范本
2015/06/12 职场文书
导游词之太湖
2019/10/08 职场文书
JS ES6异步解决方案
2021/04/29 Javascript