angular.js和vue.js中实现函数去抖示例(debounce)


Posted in Javascript onJanuary 18, 2018

问题描述

搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等。

学过电子电路的同学应该知道按键防抖。原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。本文将分别探讨在angular.js和vue.js中如何实现对用户输入的防抖。

angular.js中解决方案

把去抖函数写成一个service,方便多处调用:

.factory('debounce', ['$timeout','$q', function($timeout, $q) {
  // The service is actually this function, which we call with the func
  // that should be debounced and how long to wait in between calls
  return function debounce(func, wait, immediate) {
   var timeout;
   // Create a deferred object that will be resolved when we need to
   // actually call the func
   var deferred = $q.defer();
   return function() {
    var context = this, args = arguments;
    var later = function() {
     timeout = null;
     if(!immediate) {
      deferred.resolve(func.apply(context, args));
      deferred = $q.defer();
     }
    };
    var callNow = immediate && !timeout;
    if ( timeout ) {
     $timeout.cancel(timeout);
    }
    timeout = $timeout(later, wait);
    if (callNow) {
     deferred.resolve(func.apply(context,args));
     deferred = $q.defer();
    }
    return deferred.promise;
   };
  };
 }])

调用方法,在需要使用该功能的controller/directive中注入debounce,也要注入$watch,然后:

$scope.$watch('searchText',debounce(function (newV, oldV) {
  console.log(newV, oldV);
  if (newV !== oldV) {
    $scope.getDatas(newV);
  }
}, 350));

大功告成!

Vue.js中的解决方案

首先在公共函数文件中注册debounce

export function debounce(func, delay) {
 let timer

 return function (...args) {
  if (timer) {
   clearTimeout(timer)
  }
  timer = setTimeout(() => {
   func.apply(this, args)
  }, delay)
 }
}

然后在需要使用的组件中引入debounce,并且在created生命周期内调用:

created() {
 this.$watch('searchText', debounce((newSearchText) => {
  this.getDatas(newSearchText)
 }, 200))
}

大功告成!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 创建快捷方式的代码(fso)
Nov 19 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
Jquery api 速查表分享
Jan 12 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
JavaScript进制转换实现方法解析
Jan 18 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 #Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 #Javascript
详解微信小程序审核不通过的解决方法
Jan 17 #Javascript
swiper动态改变滑动内容的实现方法
Jan 17 #Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 #Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 #Javascript
angularjs 页面自适应高度的方法
Jan 17 #Javascript
You might like
《PHP边学边教》(01.开篇――准备工作)
2006/12/13 PHP
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
简述Python中的面向对象编程的概念
2015/04/27 Python
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
python定位xpath 节点位置的方法
2019/08/27 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
pymysql模块的操作实例
2019/12/17 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
自荐信格式简述
2014/01/25 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
2014年德育工作总结
2014/11/20 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫
python创建字典及相关管理操作
2022/04/13 Python