防抖
在监听 scroll 事件的时候经常会用到防抖, 当滚动到某一位置而触发状态, 从而不会出现频繁滚动持续触发事件的情况
防抖的事件处理机制仅触发一次且必须是结束状态下才会执行
- function debounce(fun, delay) {
- let timer;
- return function() {
- timer && clearTimeout(timer);
- timer = setTimeout(function() {
- fun();
- }, delay);
- }
- }
- Windows.addEventListener('scroll',
- debounce(function() {
- console.log(document.documentElement.scrollTop);
- }, 300)
- );
节流
防抖有个明显的缺点就是它在事件运行的过程中不能够执行事件, 比如图片的懒加载就不能够满足, 当滚动了很多但是由于没有停止导致图片仍然不会加载出来
节流的事件处理机制是在一定时间内无法重复调事件
- function throttle(fun, delay) {
- let timer, start;
- return function starting() {
- const now = Date.now();
- if(!start) start = now;
- timer && clearTimeout(timer);
- if(now - start>= delay) {
- fun();
- start = now;
- } else {
- timer = setTimeout(function() {
- starting();
- }, 1);
- }
- }
- }
- Windows.addEventListener('scroll',
- throttle(function() {
- console.log(document.documentElement.scrollTop);
- }, 1000)
- );
来源: http://www.bubuko.com/infodetail-2978093.html