js 节流函数

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>Documenttitle>
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

相关阅读:
Linux权限
这大概是“毕业”式裁员的祖宗？
美国洛杉矶站群服务器如何提高网站排名?
NVMe-MI --- Message Transport（消息传输）
sql查询到了数据但是实体类个别字段为null(映射失败)
93. 复原 IP 地址
矩阵分析与应用-11-向量子空间的基
Kubernetes技术与架构-Ingress
银河麒麟服务器x86安装ntp客户端，并配置成功可以同步时间
[DS资源推荐] Data Structure 严书配套代码

原文地址：https://blog.csdn.net/weixin_39531049/article/details/133325720