angular debounce throttle
来源:互联网 发布:php session共享 编辑:程序博客网 时间:2024/05/05 00:20
throttle
我们这里说的throttle就是函数节流的意思。再说的通俗一点就是函数调用的频度控制器,是连续执行时间间隔控制。主要应用的场景比如:
- 鼠标移动,mousemove 事件
- DOM 元素动态定位,window对象的resize和scroll 事件
有人形象的把上面说的事件形象的比喻成机关枪的扫射,throttle就是机关枪的扳机,你不放扳机,它就一直扫射。我们开发时用的上面这些事件也是一样,你不松开鼠标,它的事件就一直触发。回到window resize和scroll事件的基本优化提到的优化:
setTimeout和clearTimeout其实就是一个简单的 throttle,很多好的控制了resize事件的调用频度。
debounce
debounce和throttle很像,debounce是空闲时间必须大于或等于 一定值的时候,才会执行调用方法。debounce是空闲时间的间隔控制。比如我们做autocomplete,这时需要我们很好的控制输入文字时调用方法时间间隔。一般时第一个输入的字符马上开始调用,根据一定的时间间隔重复调用执行的方法。对于变态的输入,比如按住某一个建不放的时候特别有用。
debounce主要应用的场景比如:
- 文本输入keydown 事件,keyup 事件,例如做autocomplete
这类网上的方法有很多,比如Underscore.js就对throttle和debounce进行封装
angular 1.3版本之后可以使用 ngModelOptions参数在设置相应的debounce
ngModelOptionsObjectoptions to apply to the current model. Valid keys are:
updateOn
: string specifying which event should the input be bound to. You can set several events using an space delimited list. There is a special event calleddefault
that matches the default events belonging of the control.debounce
: integer value which contains the debounce model update value in milliseconds. A value of 0 triggers an immediate update. If an object is supplied instead, you can specify a custom value for each event. For example:ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
allowInvalid
: boolean value which indicates that the model can be set with values that did not validate correctly instead of the default behavior of setting the model to undefined.getterSetter
: boolean value which determines whether or not to treat functions bound tongModel
as getters/setters.timezone
: Defines the timezone to be used to read/write theDate
instance in the model for<input type="date">
,<input type="time">
, ... . It understands UTC/GMT and the continental US time zone abbreviations, but for general use, use a time zone offset, for example,'+0430'
(4 hours, 30 minutes east of the Greenwich meridian) If not specified, the timezone of the browser will be used.
angular.module('lz.utils.debounce', []) .service('$debounce', ['$timeout', function ($timeout) { return function (func, wait, immediate, invokeApply) { var timeout, args, me, result; function debounce() { /* jshint validthis:true */ me = this; args = arguments; var later = function () { timeout = null; if (!immediate) { result = func.apply(me, args); } }; var callNow = immediate && !timeout; if (timeout) { $timeout.cancel(timeout); } timeout = $timeout(later, wait, invokeApply); if (callNow) { result = func.apply(me, args); } return result; } debounce.cancel = function () { $timeout.cancel(timeout); timeout = null; }; return debounce; }; }]) /** * usage: <XX lz-debounce="500" immediate="true" ng-model="test"></XX> */ .directive('lzDebounce', ['$debounce', '$parse', function (debounce, $parse) { return { require: 'ngModel', priority: 999, link: function ($scope, $element, $attrs, ngModelController) { var debounceDuration = $parse($attrs.debounce)($scope); var immediate = !!$parse($attrs.immediate)($scope); var debouncedValue, pass; var prevRender = ngModelController.$render.bind(ngModelController); var commitSoon = debounce(function (viewValue) { pass = true; ngModelController.$$lastCommittedViewValue = debouncedValue; ngModelController.$setViewValue(viewValue); pass = false; }, parseInt(debounceDuration, 10), immediate); ngModelController.$render = function () { prevRender(); commitSoon.cancel(); //we must be first parser for this to work properly, //so we have priority 999 so that we unshift into parsers last debouncedValue = this.$viewValue; }; ngModelController.$parsers.unshift(function (value) { if (pass) { debouncedValue = value; return value; } else { commitSoon(ngModelController.$viewValue); return debouncedValue; } }); } }; }]);
0 0
- angular debounce throttle
- throttle&debounce
- throttle and debounce
- debounce与throttle区别
- 白话debounce和throttle
- debounce与throttle区别
- 高阶函数 debounce 和 throttle
- javascript函数的throttle和debounce
- javascript函数的throttle和debounce
- 图解 debounce 与 throttle 的区别
- 图解 debounce 与 throttle 的区别
- javascript函数的throttle和debounce
- debounce 防抖和 throttle 节流
- 原生JS的debounce和throttle
- jQuery throttle / debounce: Sometimes, less is more!
- Debounce 和 Throttle 的原理及实现
- debounce与throttle实现与原理
- JS函数节流(throttle)和函数去抖(debounce)
- iOS开发之Core Data数据存储
- PCA技术降维
- (小笔记) 动态添加textview
- JBoss Access log的配置
- leetcode -- Letter Combinations of a Phone Number -- 重点
- angular debounce throttle
- 分布式Process之三: Time and Ordering
- 基于多尺度对比度x射线图像增强算法
- SPIKE&FUZZING 模糊测试(收藏)
- CentOS7.1安装Oracle 12.1客户端以及cx_Oracle
- spark on yarn启用动态分配
- 数据结构之二叉搜索树
- IOS 基础框架名称
- C++学习笔记(初级篇)——Lambda表达式