<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <style type="text/css"> body{ height:2000px;} div{ position:fixed; right:0; width:100px; height:100px; background:#0ff;} </style> <div id="box1" style="top:0;"></div> <div id="box2" style="top:150px;"></div> <div id="box3" style="top:300px;"></div> <script type="text/javascript" src="jquery-1.5.2.min.js"></script> <script type="text/javascript"> $(function () { /*var onFooEndFunc = function () { var delay = 50; var executionTimer; return function () { if (!!executionTimer) { clearTimeout(executionTimer); } executionTimer = setTimeout(function () { }, delay); }; }();*/ var end = function () { var delay = 50, executionTimer; return function (outputId) { if (!!executionTimer) { clearTimeout(executionTimer); } executionTimer = setTimeout(function () { $(outputId).html(++delay); }, delay); }; }(); $('body').mousemove(function () { end('#box1'); }); $(window).resize(function () { end('#box2'); }); $(window).scroll(function () { end('#box3'); }); }); </script> </body> </html>