网站建设的科目,网店推广方案范文,北京seo薪资,WordPress的欢迎页面我们知道#xff0c;js有些事件例如resize#xff0c;mousemove等是会不间断触发的#xff0c;例如我们简单的一个scroll事件#xff1a; function scrollFn(){console.log(1)
}
window.onscrollscrollFn 我们需要在滚动的时候去做一些事情#xff0c;如上图可见#… 我们知道js有些事件例如resizemousemove等是会不间断触发的例如我们简单的一个scroll事件 function scrollFn(){console.log(1)
}
window.onscrollscrollFn 我们需要在滚动的时候去做一些事情如上图可见我们只是简单的console在一次滚动过程中函数即执行了将近20次如果这个函数有更为复杂的方法比如操作dom或者其他交互会严重影响性能。为了避免这个问题我们一般会使用定时器来对函数进行节流。 函数节流的基本思想是设置一个定时器在指定时间间隔内运行代码时清楚上一次的定时器并设置另一个定时器知道函数请求停止并超过时间间隔才会执行。 在javascript高级程序设计中定义了一个方法如下 function throttle(method,context){clearTimeout(method.tId);method.tIdsetTimeout(function(){method.call(context)},300)
} throttle函数接收两个参数即要执行的函数及执行环境如果执行环境未定义默认则为windows。在这个函数中会在第一次执行时为method顶一个定时器属性在指定时间间隔300内再次执行时会清楚上一次定义的定时器并创建新定时器知道停止。 function scrollFn(){console.log(1)
}
function throttle(method,context){clearTimeout(method.tId);method.tIdsetTimeout(function(){method.call(context)},300)
}
window.onscrollfunction(){throttle(scrollFn)
} 网上还有一种解决方案 function throttle(method,delay){var timernull;return function(){var contextthis, argsarguments;clearTimeout(timer);timersetTimeout(function(){method.apply(context,args);},delay);}
} 调用结果和第一种结果相同都能有效的阻止函数重复调用不同的是第一种将定时器设置为函数的一个属性而第二种方案通过闭包来实现。首先在函数内定义一个变量timer然后返回一个函数我们知道由于在返回函数中包含对timer的引用因此timer并不会立即被清除。我们也可以将timer定义为全局变量。 以上两种方案存在一个问题即如果事件一直触发那么函数将永远不会被执行这在某些时候并不符合我们的需求可能我们只是想在规定时间内减少函数执行次数所以对以上函数做如下改进 function scrollFn(){console.log(1)
}
function throttle(method,delay,duration){var timernull;var beginnew Date(); return function(){ var contextthis, argsarguments;var currentnew Date(); clearTimeout(timer);if(current-beginduration){method.apply(context,args);begincurrent;}else{timersetTimeout(function(){method.apply(context,args);},delay);}}
}
window.onscrollthrottle(scrollFn,100,500) 我们在初始的时候定义一个begin开始时间当时间间隔超过duration时则执行一次函数这样我们做到了不重复调用又能保证500秒执行一次。 参考http://www.cnblogs.com/dolphinX/p/3403821.html 转载于:https://www.cnblogs.com/mopagunda/p/5323080.html
