本文共 1078 字，大约阅读时间需要 3 分钟。

由来

在前端开发中有一部分的用户行为会频繁的触发事件执行,而对于DOM操作.资源加载等耗费性能的处理,

很可能导致页面的卡顿,甚至是浏览器的崩溃.函数节流和函数防抖就是为了解决类似需求应运而生的。

节流

• 定义

1. 函数节流就是预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行。好像水滴攒到一定重量才会落下一样。

• 场景

1. 窗口调整(resize)
2. 页面滚动(scoll)
3. 抢购疯狂点击(mousedown)

• 实现

function throttle(handler, wait){              // handler 预定义函数 wait等待毫秒数            var lastTime = 0;            return function(e){                var nowTime = new Date().getTime();                if(nowTime-lastTime > wait){                    handler.apply(this,arguments);                    lastTime = nowTime;                }else{                    //lastTime = nowTime;                }            }        }

防抖

• 定义

1. 函数防抖就是在函数需要频繁触发情况下,只要有足够的空闲时间,才执行一次。
   就好像是公交司机会等人都上车后才出站一样

• 场景

1. 实时搜索(keyup)
2. 拖拽(mousemove)

• 实现

function debounce(handler, delay){ 		    // handler 预定义函数 wait等待毫秒            var timer = null;            return function (){                var _self = this, args = arguments;                clearTimeout(timer);                timer = setTimeout(function(){                    handler.apply(_self, args);                },delay);            }        }