JS 节流

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

要讲故事

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

阅读量187

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Wzc0720/article/details/131762972

版权

文章介绍了JavaScript中的节流技术，用于限制函数在一定时间内只能执行一次，以提高性能。通过示例展示了如何在滚动事件、搜索联想和鼠标点击事件中应用节流，并提供了逐步优化的代码实现，包括设置标记变量和使用setTimeout进行延迟执行。

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

节流:

简单地说，就是限制一个动作在一段时间内只能执行一次

应用场景:

scroll 事件，每隔一秒计算一次位置信息等
比如我们常见的谷歌搜索框的联想功能
监听浏览器的滚动加载事件
高频鼠标点击事件（也可做防抖）
拖拽动画

节流的初始状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 1000px;
        }
    </style>
</head>
<body>
    <script>
        window.onscroll=function(){
            //业务逻辑
            console.log("触发")
            
        }
    </script>
</body>
</html>

初步解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 1000px;
        }
    </style>
</head>
<body>
    <script>
        var flag=true;//逻辑值
        var time=null
        window.onscroll =function(){
            if(flag){    //标记变量为true时开始计时
                time=setTimeout(()=>{
                    console.log("触发")
                    flag=true
                },1000);
            }
            flag= false   //n秒内flag值为false，不触发计时器
        }
    </script>
</body>
</html>

节流优化

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 1000px;
        }
    </style>
</head>

<body>
    <script>
        //将节流函数与业务逻辑单独封装
        window.onscroll = throttle(task,500)

        //节流函数
        function task(fn, delay) {
            console.log("触发")

        }
        //节流函数
        function throttle(fn, delay) {
            var flag = true
            var time = null
            return function () {
                if (flag) {
                    time = setTimeout(() => {
                        fn.call(this)
                        flag = true
                    }, delay)
                }
                flag = false
            }
        }
    </script>
</body>

</html>