工具集合

工具集合,以 IUI_UTILS命名,挂载至 window对象下,集合了常用的浏览器特征判断及 javascript辅助函数。

List

  • animateEnd

  • transitionEnd

  • isPlaceholder

  • throttle

  • debounce

Property

animateEnd

window.IUI_UTILS = {
  animateEnd: 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
}

transitionEnd

window.IUI_UTILS = {
  transitionEnd: 'webkitTransitionEnd transitionend oTransitionEnd MSTransitionEnd msTransitionEnd',
}

Functions

debounce与throttle

作者

http://underscorejs.org/

简介

debouncethrottle常被用来处理 DOM相关事件,通过限制事件的执行频率来提升性能。但它们之间也有使用场景的差别。

throttle强调的是函数间隔多长时间执行一次。比如说在10秒中函数执行1000次,但是如果你通过 throttle设置每隔100毫秒执行一次的话,那么它就最多会执行100次。

debounce则是在指定时间内如果没有执行该函数的话,则马上执行该函数,比如说100毫秒后如果还没有执行处理函数,那么就在100毫秒后马上执行。比如一个函数在3秒内执行1000次,然后停止执行。如果你通过debounce设置函数的执行时间为100毫秒,那么该函数只会在3.1秒的时候执行一次,在 debounce设置的100毫秒内由于会触发函数的执行,因此它不断的重置这个timer。

使用场景

这两个函数常被用来处理DOM事件,比如滚动页面和resize页面大小。比如你在一个元素上绑定了scroll事件,想让元素向下滚动5000px,并且触发100次以上的scroll事件,如果你的处理函数涉及很大的计算量的话,你就会发现在滚动时页面会存在一定的性能问题,如果此时你减少scroll事件的执行次数,那么性能就会得到很大的提升。

常用的场景:

  • input 中输入文字自动发送 ajax 请求进行自动补全: debounce

  • resize window 重新计算样式或布局:debounce

  • mouseleave 时隐藏二级菜单:debounce,并合理使用 cancel 方法

  • scroll 时更新样式,如随动效果:throttle

如何使用:

这两个函数在Underscore和Lodash中都得到了实现。即使你在项目中不会使用到这两个库,你也可以把它们抽出来放在你自己的项目中使用。

$("body").on('scroll', IUI_UTILS.throttle(function() {
  // Do expensive things
}, 100));

$(window).on('resize', IUI_UTILS.debounce(function() {
  // Do expensive things
}, 100));

如果您发现本页有什么问题,欢迎来提单 Issue : https://github.com/Janking/infinite-ui/issues