工具集合

工具集合，以 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/

简介

debounce和 throttle常被用来处理 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