25、js - 面试 - 节流

EchoLiner

已于 2023-06-13 20:34:51 修改

阅读量82

点赞数

文章标签： javascript 开发语言 ecmascript 前端前端框架 Powered by 金山文档

于 2023-06-07 10:31:04 首次发布

本文链接：https://blog.csdn.net/echoliner/article/details/131082653

版权

该文章演示了如何在HTML中创建一个带有CSS样式的盒子，并通过JavaScript监听鼠标移动事件。为了优化性能，文章展示了两种方法来实现事件节流，一种是利用lodash的_.throttle函数，另一种是自定义节流函数，确保在单位时间内对高频事件如mousemove只执行一次，从而防止过度渲染和提高页面性能。

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

<!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>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background: #ccc;
            font-size: 100px;
        }
    </style>
</head>

<body>

    <div class="box"></div>

</body>

</html>
<script src="./lodash.min.js"></script>
<script>

    // 节流：单位时间内，频繁地触发事件，只执行一次
    // 使用场景：高频事件：鼠标移动mousemove、页面尺寸缩放resize、滚动条滚动scroll等等

    const box = document.querySelector('div');
    let i = 0;

    function myFn() {
        i++;
        this.innerHTML = i;
    }

    // 方案一：使用lodash库的_.throttle()方法，_.throttle()方法会返回一个函数
    // box.addEventListener('mousemove', _.throttle(myFn, 1000));

    // 方案二：自己手写节流函数
    box.addEventListener('mousemove', throttle(myFn, 1000));

    function throttle(fn, time) {
        let timer = null;
        return function () {
            if (!timer) {
                timer = setTimeout(() => {
                    fn.call(this);
                    timer = null;
                }, time);
            }
        }
    }


</script>