理解JS的节流、防抖及使用场景
2018-09-05 09:55
621 查看
文章来源: https://juejin.im/post/5b8de829f265da43623c4261
函数防抖(debounce)
在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
[code]//模拟一段ajax请求 function ajax(content) { console.log('ajax request ' + content) } function debounce(fun, delay) { return function (args) { let that = this let _args = args clearTimeout(fun.id) fun.id = setTimeout(function () { fun.call(that, _args) }, delay) } } let inputb = document.getElementById('debounce') let debounceAjax = debounce(ajax, 500) inputb.addEventListener('keyup', function (e) { debounceAjax(e.target.value) }) 作者:薄荷前端 链接:https://juejin.im/post/5b8de829f265da43623c4261 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
个人理解 函数防抖就是法师发技能的时候要读条,技能读条没完再按技能就会重新读条。
函数节流(throttle)
规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
[code] function throttle(fun, delay) { let last, deferTimer return function (args) { let that = this let _args = arguments let now = +new Date() if (last && now < last + delay) { clearTimeout(deferTimer) deferTimer = setTimeout(function () { last = now fun.apply(that, _args) }, delay) }else { last = now fun.apply(that,_args) } } } let throttleAjax = throttle(ajax, 1000) let inputc = document.getElementById('throttle') inputc.addEventListener('keyup', function(e) { throttleAjax(e.target.value) })
个人理解 函数节流就是fps游戏的射速,就算一直按着鼠标射击,也只会在规定射速内射出子弹。
总结
- 函数防抖和函数节流都是防止某一时间频繁触发,但是这两兄弟之间的原理却不一样。
- 函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行。
结合应用场景
- debounce search搜索联想,用户在不断输入值时,用防抖来节约请求资源。
- window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次
- 鼠标不断点击触发,mousedown(单位时间内只触发一次)
阅读更多
相关文章推荐
- JS 对于回调函数的理解,和常见的使用场景应用,使用注意点
- JS 对于回调函数的理解,和常见的使用场景应用,使用注意点
- JS 对于回调函数的理解,和常见的使用场景应用,使用注意点
- Node.js:理解使用事件发射器模式简化事件绑定
- 关于 js 中的 call 和 apply使用理解
- js中的call()方法理解和使用
- 关于js中单引号(')和双引号(")的使用以及转义的理解
- js css html和DOM的关系和使用场景
- 你如何理解 HTML5 的 section?会在什么场景使用?为什么这些场景使用 section 而不是 div?
- 浅谈 Underscorejs中 _.throttle 和 _.debounce 的差异和使用场景
- java框架使用场景理解
- activtiy,view和windows的理解,lanchMode的使用场景
- 使用node.js + socket.io + redis实现基本的聊天室场景
- 关于js中单引号(')和双引号(")的使用以及转义的理解
- 理解js闭包是为了避免使用闭包
- Seen.js – 使用 SVG 或者 Canvas 渲染 3D 场景
- 关于js中单引号(')和双引号(")的使用以及转义的理解
- 关于js中单引号(')和双引号(")的使用以及转义的理解
- 使用node.js + socket.io + redis实现基本的聊天室场景
- js作用域及作用域链概念理解及使用