js-性能优化之节流

最新推荐文章于 2024-07-20 14:49:34 发布

fengchenguo

最新推荐文章于 2024-07-20 14:49:34 发布

阅读量172

点赞数

分类专栏： js 文章标签： js javascript

本文链接：https://blog.csdn.net/fengchenguo/article/details/116022290

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文探讨了在移动端和PC端广泛使用的滚动交互中，如何通过节流技术来提升页面性能。当用户滚动屏幕时，频繁触发的滚动事件可能导致性能下降。通过节流函数，可以在设定的时间间隔内限制事件处理函数的执行次数，从而减少不必要的计算。示例代码展示了如何实现一个基于定时器的节流函数，并应用于屏幕滚动事件，以实现更流畅的用户体验。

摘要由CSDN通过智能技术生成

不管在pc端还是移动端，都存在一种非常普遍的交互方式–滚动屏幕。以移动端为例，当用户滚动屏幕的时候，触发滚动的回调函数可以用于监听滚动的距离，提前加载下一页数据。一般情况下只要屏幕滚动了滚动事件就会一直触发，这会大大减少页面的性能。因此我们可以通过节流函数来稀释滚动事件的执行。

节流：指连续触发事件但是在 n 秒钟内只执行一次函数。节流会稀释函数的执行频率。实际上节流与防抖的效果是类似的。

场景：屏幕滚动、鼠标移动、input输入、连续点击按钮等其他场景。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>性能优化-防抖</title>
    <style>
        #app {
            width: 100px;
            height: 100px;
            background-color: rgb(144, 165, 48);
            color: white;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div id="app">点我</div>
    <script>
        // 定时器版本
		// 思想：通过定时器，如果定时器处于计时状态，则不作任何操作；如果定时器不处于计时状态，则直接执行回调，并设置定时器
        function throttle_timer(fn, delay) {
            let timer = null
            return function () {
                const self = this, args = arguments;
                // 如果还在计时内
                if (!timer) {
                    // 执行回调
                    fn.call(self, args)
                    // 重新设置定时器
                    timer = setTimeout(() => {
                        timer = null
                    }, delay);
                }
            }
        }

		let count = 0
        const app = document.getElementById('app')

        app.onmousemove = throttle_timer(mouseMove, 2000) 

		// 不能使用箭头函数，否则在有this情况下会出错
        function mouseMove() {
            count++
            app.textContent = count
        }
    </script>
</body>

</html>