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 相关文章推荐
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
JS async 函数的含义和用法实例总结
Apr 08 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
php 连接mssql数据库 初学php笔记
2010/03/01 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
javascript常用的设计模式
2017/02/09 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
python中xrange和range的区别
2014/05/13 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
python中如何使用insert函数
2020/01/09 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
Python运算符+与+=的方法实例
2021/02/18 Python
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
双语教学实施方案
2014/03/23 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
介绍信的格式
2015/01/30 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
学校国庆节活动总结
2015/03/23 职场文书
仓库管理制度范本
2015/08/04 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书