问题描述

搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等。

学过电子电路的同学应该知道按键防抖。原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。本文将分别探讨在angular.js和vue.js中如何实现对用户输入的防抖。

angular.js中解决方案

函数防抖Debounce写成一个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))
}

大功告成!

引用

1. https://stackoverflow.com/questions/29771011/angularjs-watch-with-debounce
2. https://www.cnblogs.com/fsjohnhuang/p/4147810.html

原文地址:https://segmentfault.com/a/1190000012751237

angular.js和vue.js中实现函数去抖(debounce)的更多相关文章

  1. js 函数节流throttle 函数去抖debounce

    1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...

  2. 我从Angular 2转向Vue.js, 也没有选择React

    译者按: 通过使用Angular的经历,作者已经完全转为Vue粉了!我们Fundebug目前还是用AngularJS 1,坦白说,学习曲线蛮陡的. 原文: Why we moved from Angu ...

  3. Ember.js和Vue.js对比,哪个框架更优秀?

    本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript最初是为Web应用程序创建的.但是随着前端技术的 ...

  4. Ember.js和Vue.js,哪种框架更适合你?

    JavaScript最初是为Web应用程序而创建的.随着前端技术的发展,比起纯JavaScript 脚本,大多数开发人员更喜欢使用基于JavaScript的框架来开发Web应用,如Vue.React等 ...

  5. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

  6. React.js vs Vue.js All in One

    React.js vs Vue.js All in One React 与 Vue 区别对比 https://vuejs.org/v2/guide/comparison.html 1. 使用人数, 社 ...

  7. JavaScript 中函数节流和函数去抖的讲解

    JavaScript 中函数节流和函数去抖的讲解 我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所 ...

  8. javascript中的函数节流和函数去抖

    带着问题去尝试 首先我们要知道为什么要用到函数节流和函数去抖?我们带着以下的疑问来进行分析! 1.比如搜索框,你会用到什么事件(change.blur.keyup等)?去做什么效果?2.再比如scro ...

  9. (转)JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce)

     JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce)         函数节流,简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过 ...

随机推荐

  1. Pyhton学习——Day4

    '''y=2*x+1x=3y->7x=3y->7'''# def test(x):# '''# 2*x+1# :param x:整形数字# :return: 返回计算结果# '''# y= ...

  2. js异步队列之理解

    起因 最近看到一篇关于js异步执行顺序的解答,觉得有所收获,遂记录下来. marcotask和microtask js中异步队列可以分为两类,marcotask队列和microtask队列, marc ...

  3. sort函数用法详解

    用于C++中,对给定区间所有元素进行排序.头文件是#include <algorithm> sort函数进行快速排序,时间复杂度为n*log2n,比冒泡之类的要省时不少 Sort函数使用模 ...

  4. Android开发新手HelloWorld解析

    首先看这个 HelloWorld 类. Java代码public class HelloWorld extends Activity {       /** Called when the activ ...

  5. qt 透明化方法汇总

    一. QT 透明设置 背景,标题栏透明,下级Widget,painter绘出来的(比如,drawtext,drawline)不透明 QWidget window; window.setWindowFl ...

  6. Ubuntu下使用crontab部署定时任务

    Ubuntu下使用crontab部署定时任务 安装cron apt-get install cron 开启crontab日志 默认情况下的日志是没有开启的,我们需要找到 /etc/rsyslog.d/ ...

  7. windows关于定时执行的php脚本

    根据业务需求,需要服务器每天定时执行一些脚本,如后台提交数据,定时处理数据库等. 最初的思路是在某个控制器里写好方法,加入code验证,定期的用计划任务去访问.由于window计划任务这方面比较low ...

  8. 洛谷 2409 dp 月赛题目

    洛谷 2409 dp 洛谷十月月赛T1,一道有些interesting的dp题目,当时做的时候想的比较复杂,根本没有往dp的方向去想.. 非官方题解: 1.据说可以使用优先队列来处理,参见Uva119 ...

  9. HDU 5358 First One(枚举)

    First One Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Tota ...

  10. HDU 4749 Parade Show(暴力水果)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4749 Problem Description   2013 is the 60 anniversary ...