js 节流函数

别再NULL了

已于 2023-09-26 23:22:35 修改

阅读量201

点赞数

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

于 2023-09-26 23:16:08 首次发布

本文链接：https://blog.csdn.net/weixin_39531049/article/details/133325720

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

javascript 节流函数

什么是节流函数?
顾名思义就是节省网络资源的函数,减少网络请求. 造成不必要的资源浪费
节流函数就是不管用户操作了几次,但是在指定的时间内只能操作一次(一般指网络请求)
节流函数的使用场景?
例如:
2.1 上拉加载更多的时候, 触底事件触发频率很高
2.2 点击按钮的时候,触发的频率很高,造成多次请求.
怎么使用节流函数?
下面的案例是模拟上拉加载更多的使用方法

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .outer{
            width:300px;
            height:600px;
            overflow: scroll;
        }
        .scrollInner{
            width:300px;
            height:1800px;
            background-color: #f00;
        }
    </style>
</head>
<body>

    <div class="outer" id="outer">
        <div class="scrollInner">

        </div>
    </div>
    <script>
       let outer = document.getElementById('outer');
       
       outer.onscroll = throttle(scrollEvent,1000);

       function scrollEvent(e){
            if(e.target.scrollHeight - e.target.scrollTop == e.target.clientHeight){
                getData();
            }
       }

       //网络请求

       function getData(){
             fetch("http://localhost:8080/jtestcollapse/testFruit/list").then(res=>{
                return res.json()
            }).then(res1=>{
                console.log(res1.result.records);
            })
       }

       //节流

       function throttle(callback,time){
            let timer = null;
            return function(...args){
                if(!timer){
                    timer = setTimeout(()=>{
                        callback.apply(this,args)
                        timer = null;
                    },time)
                }
            }
       }
    </script>
</body>
</html>

别再NULL了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js 节流函数

节流函数就是不管用户操作了几次,但是在指定的时间内只能操作一次(一般指网络请求)顾名思义就是节省网络资源的函数,减少网络请求. 造成不必要的资源浪费。下面的案例是模拟上拉加载更多的使用方法。节流函数的使用场景?
复制链接

扫一扫