节流函数的使用

最新推荐文章于 2024-02-26 16:56:39 发布

doraemon960320

最新推荐文章于 2024-02-26 16:56:39 发布

阅读量1.5k

点赞数 1

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.csdn.net/zl960320/article/details/119359466

版权

本文介绍了JavaScript中的节流技术，通过比喻食堂打饭的过程解释其工作原理，即在一定时间内只处理一次事件，防止频繁调用。节流函数常用于优化如加载图片等场景，确保性能效率。

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

1.什么是节流？节流有什么作用？

这一篇来讲解什么是节流，节流就是当持续触发事件的时候，保证一定时间内只调用一次事件处理函数，一段时间内只调用一次。

通俗点讲，就是当我们去食堂排队打饭的时候，无论有多少人排队，只有当你前面一个人打完饭之后，才能轮到你打饭，也就是说，在上一个人打饭的这一段时间内，食堂叔叔阿姨只为前一个人服务，当为前一个人服务完之后，才能开始为你服务。这个例子是不是通俗易懂。哈哈哈~~~

下面言归正传，既然也是一段时间内，所以节流函数里面也需要使用定时器setTimeout,但是这里与防抖的区别是，节流是一段时间内不管你触发多少次，只响应一次

下面上代码

2.代码的通俗解释

<body>
    <button id="btn">点击</button>
    <script>
        //1.获取元素
        var btn=document.getElementById("btn");
        //2.节流函数
        function throttle(callback,wait){
            let timeout=null;//设置一个时间间隔
            return function(value){
            //这里和防抖函数一样，需要将timeout的数据保留在内存中，所以这里需要是用闭包，闭包就是函数里面return 函数
                if(!timeout){
                //当没有人服务时，就开启定时器为人服务