什么是js防抖函数?什么是js节流函数?说句让大家见笑的话,前端搞了3年多,不知道什么是js防抖函数节流函数,是不是有些丢人,哈哈!如果不是看看面试题,我将继续丢人中,为什么呢?首先这种场景不常见,其次,即使你能解决这类场景,你不一定知道它的专业术语叫:防抖函数、节流函数。

场景1:文章详情页面中有点赞的功能,如果用户在一秒内点击了5次,我们是不是要发送5个ajax请求呢?如果是,估计你离渣前端不远了(哈哈哈,偷笑一会)

解决方案:使用js防抖函数;频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码

上代码:

<script>        var timer = null;        function click() {            clearTimeout(timer);            timer = setTimeout(() => {                ajax(“…”);            }, 500)        }    </script>

场景2:页面连续滚动中我想获取某个元素的高度,如果不去处理,就会有个问题,获取高度的函数会不断执行,这样无疑会影响浏览器的性能

解决方案:js节流函数; 频繁触发,但只在特定的时间内才执行一次代码

上代码:

<script>        // 限制500ms执行一次        var type = false;        window.onscroll = function () {            if (type === true) return;            type = true;            setTimeout(() => {                console.log(“要执行的事”);                type = false;            }, 500)        }    </script>

以上就是js防抖函数节流函数的全部内容,欢迎大家一起讨论交流。

微信交流