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 相关文章推荐
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
Vue程序调试的方法
Jun 17 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 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
一个简洁的多级别论坛
2006/10/09 PHP
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
PHP strripos函数用法总结
2019/02/11 PHP
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
python多进程操作实例
2014/11/21 Python
Python实现文件复制删除
2016/04/19 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
python命令行参数用法实例分析
2019/06/25 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
python障碍式期权定价公式
2019/07/19 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
倡议书格式模板
2014/05/13 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
2015年化验室工作总结
2015/04/23 职场文书
《穷人》教学反思
2016/02/19 职场文书
高中生物教学反思
2016/02/20 职场文书
初三化学教学反思
2016/02/22 职场文书
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
德劲DE1105机评
2022/04/05 无线电