Debounce和Throttle的原理及其实现Throttle和debounce是通过减少实际逻辑处理过程的执行来提高事件处理函数性能的手段。Throttle并没有实质性地减少事件触发器的数量。两者在概念理解上确实存在混淆。debounce强制函数在一定时间内只执行一次，throttle强制函数以固定速率执行。在处理一些频繁触发的DOM事件时，它们可以极大地改善用户体验。在处理resize、scroll、mousemove和keydown/keyup/keypress等事件时，我们通常不希望这些事件触发得太频繁，尤其是监听器涉及大量计算或有非常耗资源的操作时。多常？以mousemove为例，根据DOMLevel3，“如果鼠标连续移动，浏览器应该触发多个连续的mousemove事件”，这意味着浏览器会在其内部定时器允许的情况下，根据用户移动的速度鼠标移动触发mousemove事件。（当然，如果鼠标移动速度够快，比如“滑动”扫过，浏览器是不会触发这个事件的）。resize、scroll和key*等事件类似。1.debounce函数的作用是强制某个函数在一定的连续时间内只执行一次，即使它本来会被调用多次。我们希望在用户停止某个操作一段时间后，执行相应的监听函数，而不是在用户操作过程中浏览器触发一个事件执行多少次监听函数。functiondebounce(fn,delay){//timer，用于setTimeoutvartimer//返回一个函数，这个函数会在一个时间间隔结束后的delay毫秒执行fn函数returnfunction(){//保存函数call时的上下文和参数，传递给fnvarcontext=thisvarargs=arguments//每次调用this返回的函数，清空定时器，保证fn不被执行clearTimeout(timer)//当返回的函数最后一次后一个调用（即用户停止一个连续的操作），//fn将在另一个延迟毫秒后执行timer=setTimeout(function(){fn.apply(context,args)},delay)}}debounce返回一个闭包，这个闭包仍然会被持续频繁的调用，但是在闭包内部，它限制了原函数fn的执行，强制fn在连续运行停止后只执行一次。Throttlethrottle的概念比较好理解，就是函数以固定的速率执行的速率，即所谓的“节流”。Normal/****@paramfn{Function}实际要执行的函数*@paramdelay{Number}执行间隔，以毫秒（ms）为单位**@return{Function}返回一个“throttle”函数*/functionthrottle(fn,threshhold){//记录上次执行时间varlast//Timervartimer//默认间隔250msthresholdhold||(threshhold=250)//返回的函数将每隔threshhold毫秒执行一次fnfunctionreturnfunction(){//保存调用函数时的上下文和参数，并传递给fnvarcontext=thisvarargs=argumentsvarnow=+newDate()//如果自上次执行fn函数以来的时间小于threshhold，则放弃//执行fn并重新计时if(last&&now
