在前端开发的过程当中,咱们常常会须要绑定一些持续触发的事件,如 resize、scroll、mousemove 等等,但有些时候咱们并不但愿在事件持续触发的过程当中那么频繁地去执行函数。这时候就用到防抖与节流。前端
相关推荐vue
本人github: github.com/Michael-lzg
个人掘金:https://juejin.im/user/5b52fd...webpack
当持续触发事件时,必定时间段内没有再触发事件,事件处理函数才会执行一次,若是设定的时间到来以前,又一次触发了事件,就从新开始延时。以下图,持续触发scroll事件时,并不执行handle函数,当1000毫秒内没有触发scroll事件时,才会延时触发scroll事件。git
非当即执行版github
function debounce(func, wait) { let timeout; return function () { let context = this; let args = arguments; if (timeout) clearTimeout(timeout); timeout = setTimeout(() => { func.apply(context, args) }, wait); } }
非当即执行版的意思是触发事件后函数不会当即执行,而是在 n 秒后执行,若是在 n 秒内又触发了事件,则会从新计算函数执行时间。web
当即执行版vue-cli
function debounce(func,wait) { let timeout; return function () { let context = this; let args = arguments; if (timeout) clearTimeout(timeout); let callNow = !timeout; timeout = setTimeout(() => { timeout = null; }, wait) if (callNow) func.apply(context, args) } }
当即执行版的意思是触发事件后函数会当即执行,而后 n 秒内不触发事件才能继续执行函数的效果npm
当持续触发事件时,保证必定时间段内只调用一次事件处理函数。节流通俗解释就好比咱们水龙头放水,阀门一打开,水哗哗的往下流,秉着勤俭节约的优良传统美德,咱们要把水龙头关小点,最好是如咱们心意按照必定规律在某个时间间隔内一滴一滴的往下滴。以下图,持续触发scroll事件时,并不当即执行handle函数,每隔1000毫秒才会执行一次handle函数。函数节流主要有两种实现方法:时间戳和定时器后端
时间戳版:浏览器
function throttle(func, wait) { let previous = 0; return function() { let now = Date.now(); let context = this; let args = arguments; if (now - previous > wait) { func.apply(context, args); previous = now; } } }
定时器版:
function throttle(func, wait) { let timeout; return function() { let context = this; let args = arguments; if (!timeout) { timeout = setTimeout(() => { timeout = null; func.apply(context, args) }, wait) } } }
函数节流无论事件触发有多频繁,都会保证在规定时间内必定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。 好比在页面的无限加载场景下,咱们须要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操做时才去请求数据。这样的场景,就适合用节流技术来实现。
2020年你不能不知道的webpack基本配置
从零开始构建一个webpack项目
总结几个webpack打包优化的方法
总结移动端H5开发经常使用技巧
总结前端性能优化的方法
搭建一个vue-cli的移动端H5开发模板
封装一个toast和dialog组件并发布到npm
一文读尽前端路由、后端路由、单页面应用、多页面应用
关注的个人公众号不按期分享前端知识,与您一块儿进步!