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字符编码函数区别分析
Jun 05 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
JSON 数据格式详解
Sep 13 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
vue中的计算属性和侦听属性
Nov 06 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
晶体管单管来复再生式收音机
2021/03/02 无线电
php获取根域名方法汇总
2014/10/28 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
HTML中事件触发列表与解说
2007/07/09 Javascript
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
vue组件生命周期详解
2017/11/07 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
python 串行执行和并行执行实例
2020/04/30 Python
python中pivot()函数基础知识点
2021/01/03 Python
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
会计专业毕业自荐书范文
2014/02/08 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
工作失职自我检讨书
2015/05/05 职场文书
小学语文国培研修日志
2015/11/13 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书