防抖：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>防抖</title> </head> <body> <input type="text" id="inp"> </body> </html> <script> var oInp = document.querySelector('#inp'); function debounce(fn,delay){ let timer=null; return (params)=>{ clearTimeout(timer); timer=setTimeout(()=>{ fn.call(this,params); timer=null; },delay) } } function test(val){ console.log(val); } let tempFn = debounce(test,1000) oInp.onkeyup=function(e){ tempFn(e.target.value); } </script>
节流：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>节流</title> </head> <body> <input type="text" id="inp"> <div id="box" style="height: 4000px;"></div> </body> </html> <script> let oinp = document.querySelector('#inp'); let oBox = document.querySelector('#box'); let ws = new WeakSet(); ws.add(oinp); ws.add(oBox); function throttleFn(fn, delay) { let timer = null; // let oldDate let oldDate = new Date().getTime(); console.log(oldDate, "初始化原来的时间"); return (params) => { let newDate = new Date().getTime(); console.log(newDate, "初始化新的时间"); // 现在的时间 - 原来的时间 < 定时器的延迟.说明一直在快速滚动，时间差都小于定时器延时了 // 小于延时的话，进来就清除定时器，1.5秒后oldDate才能被赋上newDate的值 // 那么下一次再快速滚动时候，oldDate还是最开始代码执行获得到的值，那么new - old 如果一直小于<1500毫秒的时候 // 还是走这里的逻辑，这里的逻辑呢，又是要清除定时器。 // 直到new - old(不变的) > 1500了后才会走else，走了else就会执行fn，然后再把现在的new 赋值给了old // 这个新被赋值的old，又会在快速滚动的时候重复之前操作，在new - old<1500 的时候又是清除定时器，直到new -old > 1500 // 也就是1500毫秒后才会走else....直到滚动停止 // 初始化的时候（还没发生滚动）已经获取了old的值，那么在触发滚动的时候就会获取到new最新的时间，最新的时间怎么也比old // 大于1500毫秒了吧，所以就会直接走else if (oldDate && newDate - oldDate < delay) clearTimeout(timer); timer = setTimeout(() => { oldDate = newDate; // 这两行代码注掉也无所谓，这里就是为了最后一次再触发一次（为了获取数据更准确） fn.call(this, params); // else才是节流 }, delay) } // 直到newDate - oldDate > 1500毫秒（old在初始化时候是死的，直到new变得足够大） else { //else里面的才是节流 oldDate = newDate; fn(params); } } } function fn(val) { console.log(val); } let temp = throttleFn(fn, 1500); oinp.onkeyup = function(e) { temp(e.target.value); } document.onscroll = function(e) { temp(e.timeStamp) } </script>