防抖与节流

1. 防抖函数 1.1 防抖定义： 函数防抖（debounce）：当持续触发事件时（例如mousemove），一定时间段内没有再触发事件，事件处理函数才执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。 1.2 不做防抖的弊端： 前端开发过程中的resize,scorll,mousemove,mousehover等，会被频繁地触发，不做限制的话，有可能一秒之内执行几十次，几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作DOM的函数，那不仅会造成计算机资源的浪费还会降低程序圆形速度，甚至造成浏览器卡死，崩溃。 1.3 防抖的关键： “函数防抖”的关键在于，在一个动作发生一定时间后，才执行特定事件 1.4 防抖函数基本写法（非立即执行版本） function debounce (fn, delay) { let timer = void 0; //参数就是调用debounce函数的那个函数所拥有的的参数，也就是下面的countFn的参数 return function (...args){ if(timer) clearTimeout(timer) timer = setTimeout(() =>{ fn(...args) },delay) } } 这个版本不是立即执行版本，立即执行版本怎么写呢？ 立即执行版本 function debounce (fn, delay) { let timer = void 0; let start = void 0; //参数就是调用debounce函数的那个函数所拥有的的参数，也就是下面的countFn的参数 return function (...args){ if(!start){ fn(...args) start = 1; return } if(timer) clearTimeout(timer) timer = setTimeout(() =>{ fn(...args) //等价于fn.bind(this,args) },delay) } } 这里就是一个完整防抖函数了，假如给某个要素加一个移动事件 document.getElementById('app').onmousemove = debounce(fn,1000) 对于参数的理解：上述版本中出现了两次参数，一次是闭包函数中的...args，另一次是fn的调用中的...args，那么这个参数从哪来的？是从下面的事件调用中来的，事件调用可以这么写。 let eventFn = debounce(fn, 1000) document.getElementById('app').onmousemove = function(){eventFn(...args)} 1.5 举个例子 假如我们要实现一个鼠标移动的函数 html代码如下： js代码如下： let num = 1 function count () { document.getElementById('data').innerHTML = num num ++ } function debounce (fn, delay) { let timer = void 0; //参数就是调用debounce函数的那个函数所拥有的的参数，也就是下面的countFn的参数 return function (...args){ if(timer) clearTimeout(timer) timer = setTimeout(() =>{ fn(...args) //等价于fn.bind(this,args) },delay) } } let countFn = debounce(count, 1000) document.getElementById('app').onmousemove= countFn 1.6 防抖函数的应用 实现输入框搜索功能，当我们要搜索一个关键词时，如果连续输入会一直触发防抖，只有在停止输入后，才会触发搜索事件，代码如下： html代码如下： js代码如下： function debounce (fn, delay) { let timer = void 0; return function (...args){ if(timer) clearTimeout(timer) timer = setTimeout(() =>{ fn(...args) },delay) } } let search = function (content) { let c = content || '' document.getElementById('content').innerHTML = c } let searchFn = debounce(search, 2000) document.getElementsByTagName('input')[0].addEventListener('keyup',(e) => { searchFn(e.target.value) }) 2. 函数节流 2.1 函数节流定义 当持续触发事件时，保证一定时间段内只调用一次事件处理函数 2.2 函数节流与防抖的区别： 函数防抖是指一定时间触发一次函数，但是在这个时间内如果再次触发事件，则这个时间重新计算，直到这段时间内没有再次触发事件时才会执行函数。 函数节流是指一定时间内不管触发多少次事件，都是有规律的一段时间执行一次函数 2.3 函数节流函数 节流和防抖的函数高度类似，只是flag控制略有不同 let throttle = function(fn, delay){ let flag = true return function(...args){ if(!flag){return} flag = false setTimeout(function(){ fn(...args) flag = true },delay) } } 2.4 举个例子 还是和防抖函数的例子一样 html代码： js代码如下： let num = 1 let count = function(){ document.getElementById('data').innerHTML = num num ++ ; } let throttle = function(fn, delay){ let flag = true return function(...args){ if(!flag){return} flag = false setTimeout(function(){ fn(...args) flag = true },delay) } } document.getElementById('app').onmousemove=throttle(count, 1000)

本文章由javascript技术分享原创和收集