debounce就是防抖动, 在间隔不超过500ms的情况下,不管debounce执行多少次, lazyLoad都只执行一次;
function debounce() { clearTimeout(timer); timer = setTimeout(function() { lazyLoad(); }, 500); } }
clearTimeout使得lazyLoad不会立即执行,每次debounce调用都会重置定时器,并再次等待,只有等debounce不再调用,并等待500ms之后lazyLoad才会被调用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="height:2000px"> <script> /*debounce就是防抖动, 在间隔不超过500ms的情况下,不管debounce执行多少次,srollFn都只执行一次; clearTimeout使得srollFn不会立即执行,每次debounce调用都会重置定时器,并再次等待,只有等 debounce不再调用,并等待500ms之后srollFn 才会被调用。*/ var num=0; function lazyLoad() { num++; console.log(num); } var timer = null; function debounce() { clearTimeout(timer); timer = setTimeout(function() { lazyLoad(); }, 1000); } window.onscroll= debounce; </script> </body> </html>