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代码
Jan 11 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
Javascript创建类和对象详解
May 31 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
JavaScript作用域链实例详解
Jan 21 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
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
php 发送带附件邮件示例
2014/01/23 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
浅析JavaScript动画
2015/06/10 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
django初始化数据库的实例
2018/05/27 Python
python列表推导式操作解析
2019/11/26 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
椰子猫砂:CatSpot
2018/08/27 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
大学生旷课检讨书
2014/01/22 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
小学一年级学生评语
2014/04/22 职场文书
校园文明标语
2014/06/13 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
一文搞懂Redis中String数据类型
2022/04/03 Redis