08. 函数节流和防抖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> html{ height: 500%; } </style> </head> <body> <div id="box"></div> <script type="text/javascript"> //面试题:什么是函数节流?什么是函数防抖 /* 函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次。 - 有个需要频繁触发的函数,出于优化性能的角度,在规定时间内,只让函数触发的第一次生效,后面不生效。 */ /* *节流函数 * fn 要被节流的函数 * delay 规定的时间 */ function throlle(fn,delay){ //记录上一次触发时间 var lastTime=0; return function(){ //记录当前触发时间 var nowTime=Date.now(); if(nowTime-lastTime>delay){ //修正this指向问题 fn.call(this); // 同步函数 lastTime=nowTime; } } } document.onscroll=throlle(function(){console.log('onscroll事件被触发'+Date.now());},2000); </script> </body> </html>
(2). 防抖函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> html{ height: 500%; } </style> </head> <body> <button id="btn">按钮</button> <script type="text/javascript"> /* 防抖函数:一个需要频繁触发的函数,在规定时间内,只让最后一次生效,前面的不生效 */ /* *防抖函数 * fn 要被防抖的函数 * delay 规定的时间 */ function debounce(fn,delay){ //记录上一次触发时间 var timer=null; return function(){ //清除上一次的延迟 clearTimeout(timer); //重新设置延时器 timer=setTimeout(function(){ //修正this指向问题 fn.apply(this); },delay); } } document.getElementById('btn').onclick=debounce(function(){console.log('点击事件被触发了'+Date.now());},1000); </script> </body> </html>