angularjs防抖

1.新建debounce.js,代码如下

function debounce($timeout, $q) {
    return function debounce(func, wait, immediate){
        var timeout
        var deferred = $q.defer();
        return function () {
            var content = this;
            var args = arguments;
            var later = function () {
                timeout = null
                if(!immediate){
                    deferred.resolve(func.apply(content, args))
                    deferred = $q.defer();
                }
            }
            var callNow = immediate && !timeout;
            if(timeout){
                $timeout.cancel(timeout)
            }
            timeout = $timeout(later, wait)
            if(callNow){
                deferred.resolve(func.apply(content, args))
                deferred = $q.defer()
            }
            return deferred.promise
        }
    }
}
export  default  debounce()

2.app.js注入服务如下(import debounce from './static/scripts/factory/debounce.js' 和 .factory('debounce',['$timeout','$q',debounce])

import angular from 'angular'
import 'oclazyload'
import uirouter from 'angular-ui-router'
import uiBootstrap from 'angular-ui-bootstrap'
import debounce from './static/scripts/factory/debounce.js'
import headerDev from './static/scripts/diredctive/headerDev.js'
import slidemenuDev from './static/scripts/diredctive/slidemenuDev.js'
import routing from './router.js' //路由
import indexCtrl from  './static/components/index/indexCtrl.js' //主页
import netWork from  './static/components/index/netWork.js' //网络
import commonService from  './static/service/commonService.js' //网络
window.app = angular.module('myProject',['uirouter','uiBootstrap','oclazyload'])
    .config(routing)
    .run(['$rootScope',function($rootScope){
        $rootScope.$on('$stateChangeSuccess',function(event,toState){
            $rootScope.$broadcast('to-menu', {state: toState.name})
        })
    }])
    .service('commonService',commonService)
    .directive('headerDev',headerDev)
    .directive('slidemenuDev',slidemenuDev)
    .controller('indexCtrl',indexCtrl)
    .controller('netWork',netWork)
    .factory('debounce',['$timeout','$q',debounce])
export default app

3.防抖的controller使用$inject注入依赖

myCtr.$inject = ['$scope','debounce'].

4.直接使用debounce例如

html 内容如下

<input type="text" name="activities" ng-model="inputValue" ng-change="changeValue"></input>

js内容如下:

function myCtr($scope,debounce){
    $scope.changeValue = debounce(function(){
        this.currentValue = inputValue;
    },500)
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值