欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

angular.js和vue.js中實現(xiàn)函數(shù)去抖示例(debounce)

 更新時間:2018年01月18日 08:34:21   作者:anetin  
這篇文章主要介紹了angular.js和vue.js中實現(xiàn)函數(shù)去抖示例(debounce),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

問題描述

搜索輸入框中,只當(dāng)用戶停止輸入后,才進行后續(xù)的操作,比如發(fā)起Http請求等。

學(xué)過電子電路的同學(xué)應(yīng)該知道按鍵防抖。原理是一樣的:就是說當(dāng)調(diào)用動作n毫秒后,才會執(zhí)行該動作,若在這n毫秒內(nèi)又調(diào)用此動作則將重新計算執(zhí)行時間。本文將分別探討在angular.js和vue.js中如何實現(xiàn)對用戶輸入的防抖。

angular.js中解決方案

把去抖函數(shù)寫成一個service,方便多處調(diào)用:

.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;
   };
  };
 }])

調(diào)用方法,在需要使用該功能的controller/directive中注入debounce,也要注入$watch,然后:

$scope.$watch('searchText',debounce(function (newV, oldV) {
  console.log(newV, oldV);
  if (newV !== oldV) {
    $scope.getDatas(newV);
  }
}, 350));

大功告成!

Vue.js中的解決方案

首先在公共函數(shù)文件中注冊debounce

export function debounce(func, delay) {
 let timer

 return function (...args) {
  if (timer) {
   clearTimeout(timer)
  }
  timer = setTimeout(() => {
   func.apply(this, args)
  }, delay)
 }
}

然后在需要使用的組件中引入debounce,并且在created生命周期內(nèi)調(diào)用:

created() {
 this.$watch('searchText', debounce((newSearchText) => {
  this.getDatas(newSearchText)
 }, 200))
}

大功告成!

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Angular中使用$watch監(jiān)聽object屬性值的變化(詳解)

    Angular中使用$watch監(jiān)聽object屬性值的變化(詳解)

    下面小編就為大家?guī)硪黄狝ngular中使用$watch監(jiān)聽object屬性值的變化(詳解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04
  • 詳解什么是@ngrx/store開發(fā)包中的MemoizedSelector

    詳解什么是@ngrx/store開發(fā)包中的MemoizedSelector

    這篇文章主要為大家介紹了@ngrx/store開發(fā)包中的MemoizedSelector使用分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-07-07
  • Angularjs的鍵盤事件的綁定

    Angularjs的鍵盤事件的綁定

    這篇文章主要介紹了Angularjs的鍵盤事件的綁定的相關(guān)資料,這里提供了兩種方法,1.ng內(nèi)置指令,2.自定義指令,并進行比較,需要的朋友可以參考下
    2017-07-07
  • 使用Angular CLI快速創(chuàng)建Angular項目的一些基本概念和寫法小結(jié)

    使用Angular CLI快速創(chuàng)建Angular項目的一些基本概念和寫法小結(jié)

    這篇文章主要介紹了使用Angular CLI快速創(chuàng)建Angular項目的一些基本概念和寫法小結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • Angular 表單控件示例代碼

    Angular 表單控件示例代碼

    本文的主要是演示 Template-driven 中,一些常用控件的使用方式,僅供參考。具體請根據(jù)實際業(yè)務(wù)需求做相應(yīng)調(diào)整。
    2017-06-06
  • 妙用Angularjs實現(xiàn)表格按指定列排序

    妙用Angularjs實現(xiàn)表格按指定列排序

    使用AngularJS的過濾器,可以很容易的實現(xiàn)在表格中,點擊某一列標題進行排序,實現(xiàn)代碼也很簡單,下面小編給大家分享angularjs實現(xiàn)表格按指定列排序的實現(xiàn)代碼,需要的的朋友參考下吧
    2017-06-06
  • AngularJS實現(xiàn)表單驗證功能

    AngularJS實現(xiàn)表單驗證功能

    這篇文章主要為大家詳細介紹了AngularJS實現(xiàn)表單驗證功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • 淺析angularJS中的ui-router和ng-grid模塊

    淺析angularJS中的ui-router和ng-grid模塊

    下面小編就為大家?guī)硪黄獪\析angularJS中的ui-router和ng-grid模塊。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • angularjs自定義ng-model標簽的屬性

    angularjs自定義ng-model標簽的屬性

    這篇文章主要介紹了angularjs自定義ng-model標簽的屬性的相關(guān)資料,需要的朋友可以參考下
    2016-01-01
  • 詳解Angular中延遲加載的原理與使用

    詳解Angular中延遲加載的原理與使用

    Angular 是一個流行的框架,用于構(gòu)建動態(tài)和響應(yīng)式 Web 應(yīng)用程序,在本文中,我們將討論延遲加載以及它如何與 Angular 中的路由一起工作,感興趣的可以跟隨小編一起學(xué)習(xí)一下
    2023-06-06

最新評論