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 相关文章推荐
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
jQuery 版元素拖拽原型代码
Apr 25 Javascript
js 金额文本框实现代码
Feb 14 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
BootStrap modal实现拖拽功能
Dec 01 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数组
2006/10/09 PHP
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
使用python实现baidu hi自动登录的代码
2013/02/10 Python
python处理PHP数组文本文件实例
2014/09/18 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
文明和谐家庭事迹材料
2014/05/18 职场文书
甘南现象心得体会
2014/09/11 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
学校食堂标语
2014/10/06 职场文书
病危通知书样本
2015/04/17 职场文书
超市食品安全承诺书
2015/04/29 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技