js节流与防抖的代码实现与应用场景简述-白红宇的个人博客

js节流与防抖的代码实现与应用场景简述

发布日期：2021-05-11 00:28:53 浏览次数：14 分类：精选文章

本文共 1135 字，大约阅读时间需要 3 分钟。

节流

一定时间内只执行一次相关代码

适用场景：

图片懒加载监听滚动条

如鼠标移动事件中onmousemove、滚动条事件等，如若事件触发执行的相关代码中有关于DOM节点的相关操作又或者 ajax 请求接口，会造成计算机的性能的浪费，这种现象是我们不希望见到的

特点：监听timer这个变量，如果timer为null的时候才会执行callback

function throttle(callback, wait) {        var timer = null     return function () {             if (!timer) {                  timer = setTimeout(function () {                       callback()                    timer = null              }, wait)          }     }}function foo() {       console.log(Math.ceil(Math.random() * 10))}window.addEventListener("mousemove", throttle(foo, 2000))

防抖

在一系列频繁的操作下只取最后一次（个人理解）

应用场景：

验证码六位数在输入最后一位后自动提交表单

在调整屏幕大小时有些浏览器或者页面可能会等到调整完成才会执行callback 避免多次无意义的排版渲染

function throttle(callback, wait) {       var timer = null    return function () {            if (timer) {                clearInterval(timer)         }         timer = setTimeout(function () {                 callback()              timer = null         }, wait)     }}function foo() {       console.log(Math.ceil(Math.random() * 10))}window.addEventListener("mousemove", throttle(foo, 2000))

总结：

防抖节流的核心都是setTimeout ，都是为了降低callback的执行频率节省计算机资源优化性能提高用户体验

上一篇：js闭包经典面试题add(1)(2)(3)；//6

下一篇：react生命周期的学习与总结

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

节流

防抖

发表评论

最新留言

关于作者

推荐文章