angular.js和vue.js中实现函数去抖示例(debounce)

 更新时间:2018年01月18日 08:34:21   作者:anetin  
这篇文章主要介绍了angular.js和vue.js中实现函数去抖示例(debounce),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

问题描述

搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起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))
}

大功告成!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • angularjs 动态从后台获取下拉框的值方法

    angularjs 动态从后台获取下拉框的值方法

    今天小编就为大家分享一篇angularjs 动态从后台获取下拉框的值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • AngularJS中下拉框的基本用法示例

    AngularJS中下拉框的基本用法示例

    这篇文章主要介绍了AngularJS中下拉框的基本用法,结合具体实例形式分析了AngularJS下拉框的元素绑定、选中及显示等功能实现方法,需要的朋友可以参考下
    2017-10-10
  • Angularjs 实现动态添加控件功能

    Angularjs 实现动态添加控件功能

    这篇文章主要介绍了Angularjs 实现动态添加控件功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-05-05
  • Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法

    Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法

    ng-template 是用来定义模板的,当使用ng-template定义好一个模板之后,可以用ng-container和templateOutlet指令来进行使用。这篇文章给大家介绍了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法,需要的朋友参考下吧
    2018-08-08
  • 使用Angular.js开发的注意事项

    使用Angular.js开发的注意事项

    这篇文章主要记录了一些在学习和使用angular.js踩到的坑和需要注意的点,方便以后自己查阅,也给同样遇到这些问题的朋友们一些帮助,有需要的朋友们下面来一起看看吧。
    2016-10-10
  • ionic4+angular7+cordova上传图片功能的实例代码

    ionic4+angular7+cordova上传图片功能的实例代码

    ionic是一个垮平台开发框架,可通过web技术开发出多平台的应用。这篇文章主要介绍了ionic4+angular7+cordova上传图片功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-06-06
  • AngularJS实现表单元素值绑定操作示例

    AngularJS实现表单元素值绑定操作示例

    这篇文章主要介绍了AngularJS实现表单元素值绑定操作,结合具体实例形式分析了AngularJS针对表单元素属性相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • 用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果

    用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果

    这篇文章主要介绍了用ANGULAR实时获取本地LOCALSTORAGE数据,实现一个模拟后台数据登入的效果的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • Angular中$compile源码分析

    Angular中$compile源码分析

    本文给大家分享的是通过angular中的$compile源码进行分析,从而更好的理解angular的使用,非常的不错,希望大家能够喜欢。
    2016-01-01
  • angular第三方包开发整理(小结)

    angular第三方包开发整理(小结)

    本篇文章主要介绍了angular第三方包开发整理(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04

最新评论