javascript函数节流代码实例分享
分类:实例代码
先通过一个操作来说明函数节流的重要性。
resize事件可能大家都不陌生,具体可以参阅javascript resize事件一章节。
当调整窗口大小的时候,要不断的执行事件处理函数,这是非常耗费性能的,那么我们可以通过一定的方式,在不影响效果的情况下,来尽可能的减少执行的次数。下面是一个能够实现此功能的代码实例:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <script type="text/javascript"> var throttle = function (fn, interval) { var timer, firstTime = true; return function() { var args = arguments, _this = this; if( firstTime ) { fn.apply( _this, args ); return firstTime = false; } if (timer) { return false; } timer = setTimeout(function(){ clearTimeout(timer); timer = null; fn.apply(_this, args) }, interval || 500) } } window.onload = function () { var count = 0; var odiv = document.getElementById("antzone"); window.onresize = throttle(function () { count = count + 1; odiv.innerHTML = count; }, 1000) } </script> </head> <body> <div id="antzone"></div> </body> </html>
当然我们无法真正的控制事件处理函数的执行频率,但是我们可以控制事件处理函数中实际内容的执行频次。
javascript函数节流代码实例分享,这样的场景在实际项目中还是用的比较多的,关于javascript函数节流代码实例分享就介绍到这了。
javascript函数节流代码实例分享属于前端实例代码,有关更多实例代码大家可以查看。