优秀的编程知识分享平台

网站首页 > 技术文章 正文

JavaScript性能优化之节流(throttle)函数的实现

nanyue 2024-10-24 11:43:40 技术文章 28 ℃



一到公司小白就热情的凑过来，兴奋的说：“昨天我一个同学去面试前端岗位，面试官让她实现一个防抖函数，她没写出来，巧了你刚教过我，我就告诉她了，他现在对我很崇拜，约我今天晚上一起吃饭，说是还要在请教一些前端技巧！”

麦克微微一笑：“那你准备再教她点什么？”

“额~还没想好！”

“那不如就再告诉他节流函数实现方式吧”

“还有节流函数？”

“是的，一般面试过程中，面试官都会把这两个函数一起提出，让面试者回答，估算是她没回答出防抖函数，所以面试官也就没有再问她节流（throttle）函数的实现方式。”

“好啊，快给我讲讲！”



节流（throttle）函数

就是指连续触发事件但是在 n 秒中只执行一次函数。节流会减少函数的执行频率。

一般的使用场景是事件触发频率非常高的时候。如：

  • 当使用window.onresize进行窗口缩放时
  • 当使用mousemove 事件时
  • 监听键盘事件时。

“那感觉和防抖的作用好像也什么区别啊？”

“作用差不多，但还是有一些区别的，防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。”

多说无益，实践出真知，且看代码：


我们就用节流（throttle）来对这个对这个函数进行性能优化。

首先编写throttle函数：


然后使用它：


“感觉和防抖差不多啊！”

“是的，区别就在于clearTimeout函数执行的时机不一样。”

可复制代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
</body>
<script>
    window.onload = () => {
        let count = 0
        window.onresize = () => {
            console.log(count++)
        }
    }

    //节流
    var throttle = function (fn, wait) {
        let timer,
            firstTime = true;//判断是不是第一调用，第一次不需要延迟
        return function () {
            if (firstTime) {
                fn.apply(this, arguments);
                firstTime = false;
            }
            if (timer) {
                return false;
            }
            timer = setTimeout(() => {
                clearTimeout(timer);
                timer = null; //将timer进行初始化，
                fn.apply(this, arguments)
            }, wait)
        }
    }
</script>
</html>

总结

防抖和节流都是为了解决在短时间事件触发频率高的问题，目前都是为了减少请求，提高页面的性能。

防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

Tags：

猜你喜欢

最近发表
标签列表