关闭

angular.js和vue.js中实现函数去抖

时间: 2018-01-09阅读: 1935标签: angular

问题描述

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

学过电子电路的同学应该知道按键防抖。原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。本文将分别探讨在angular.jsvue.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))
}

大功告成!

来源:https://segmentfault.com/a/1190000012751237
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/339

Angular 如何处理未可知异常错误

代码写得再好,始终都无法完整的处理所有可能产生异常,特别是生产环境中的应用,很大一部分是数据来自用户、远程,很难保证所有数据都按程序规定的产生。事实上,除非测试人员发现或者客户报告,否则都无法得知。因此

Angular deploy 的实现

Angular CLI 在 8.3.0 发布过一个新命令 ng deploy,可以将 Angular 应用部署到远程服务器或云存储上面,例如:Firebase hosting、Azure、GitHub pages 等等,这也是算是 Angular CLI 最后一个将 Angular 应用从开发到部署打通全能选手工具了。

angular material怎么安装?

Angular Material 作为 Angular 的官方组件库,无论是设计交互还是易用性都有着极高的质量。正如官方所说其目的就是构建基于 Angular 和 TypeScript 的高质量组件库。

为什么使用AngularJS?

Angular.js是google开发者设计和开发的一套前端开发框架,帮助你简化前端开发的负担。下面给大家介绍一下你应该使用Angular.js的重要原因:要知道开源界的很多框架都是开发人员由于个人兴趣或者激情而开发出来的

angular7中的变化监测

最近做公司新项目用的angular7,中碰到了一个很头疼的问题在绑定对象中的数据改变时,页面视图没有跟新,需点击页面中的时间元素后才会更新。

什么是angular依赖注入?

依赖注入是Angular的重要特性之一,依赖注入简化了Angular解析模块/组件之间依赖的过程。依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下, 一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中

Angular 响应式表单之表单分组

表单提交,表单全部校验成功才能提交,当表单校验错误,表单边框变红,同时有错误提示信息,有重置功能。在分析代码之前,首先明确 FormControl、formControl、formControlName、FormGroup...

AngularJS实现进度条功能示例

这篇文章主要介绍了AngularJS实现进度条功能,结合具体完整实例形式分析了AngularJS实现进度条功能的原理、相关知识点与注意事项,需要的朋友可以参考下

Angular 6的新功能,特点介绍

Angular 6目的是为了使Angular变得更小,更快,更易于使用。Angular 6版本更加关注底层框架和工具链,同时加快了工具链在Angular中的运行速度,除此以外,这次更新还包括框架包

在 Angular 8 中,我们可以期待些什么?

Angular 作为一款优秀的前端框架,自诞生之日起,就致力于面向前端开发者提供一整套全功能解决方案。与其他流行框架所追求的理念不同,Angular并非作为一款可以并入 Web 应用程序的轻量级框架而生

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!