防抖与节流的使用

最新推荐文章于 2022-11-08 14:01:47 发布
DukeMr.Lee
最新推荐文章于 2022-11-08 14:01:47 发布
阅读量280
点赞数
文章标签： js
本文链接：https://blog.youkuaiyun.com/qq_43440532/article/details/121129898
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>防抖和节流</title>
    <style>
        body{height: 2000px;}
    </style>
</head>
<body>
    <button onclick="change(event)">0</button>
    <button onclick="change1(event)">0</button>
    <button onclick="change2(event)">0</button>
    <button id="btn4">0</button> <br>
    <input type="text" oninput="myInput()">
    <div id="div"></div>
    <script>
        // 每点击一次按钮,数字会加1
        function change(e){
            e.target.innerText = e.target.innerText * 1 + 1
        }

        // 此时, 如果用户连续快速点击, 数字增加的很快
        // 如果想让数字增加的慢一些, 此时可以使用防抖或节流来实现

        // 节流: 当一个函数调用的频率高,次数多时,使用节流降低函数调用的频率或次数
        // 节流有两种实现方式:  频率节流 和 时间节流
        // 1, 频率节流:  降低函数调用的频率, 例如用户点击5次,函数执行一次
        var count = 0;
        function change1(e){
            count ++;
            if(count % 5 == 0){
                e.target.innerText = e.target.innerText * 1 + 1
            }
        }
        // 频率节流一般用于: 网页滚动事件的绑定上,以降低滚动事件的执行频率
        var count1 = 0;
        window.onscroll = function(){
            count1 ++;
            if(count1 % 10 == 0){
                for (let index = 0; index < 3000; index++) {
                    console.log("scroll")
                }
            }
        }
        // 频率节流一般用于 鼠标移动事件的绑定上  鼠标移动比较快时,降低代码执行频率
        window.onmousemove = function(){ console.log("move") }

        // 2, 时间节流:  规定函数在一定时间内只执行一次, 例如用户在2秒内多次点击,函数执行一次
        var bool = false;  // 第一步:  变量表示当前两秒内是否已经点击
        function change2(e){
            if(bool) return; // 第四步: 调用函数时,判断bool值如果为true,说明两秒内有点击,则返回不再执行
            bool = true;  //第二步: 变成true,说明两秒内点击了
            setTimeout(function(){
                bool = false;  // 第三步: 两秒后,还原成false
            }, 2000)
            e.target.innerText = e.target.innerText * 1 + 1
        }
        // 时间节流一般用于: 轮播图的手动轮播导航节流, 滑动轮播图的轮播动画必须保证上一个结束后执行下一个

        // 3, 防抖: 连续多次调用一个函数, 只有最后一次执行, 前边的调用都不执行
        function change4(){
            btn4.innerText = btn4.innerText * 1 + 1
        }
        var timer;  // 防抖需要用到计时器
        btn4.onclick = function(e){
            if(timer) clearTimeout(timer)  // 每次点击,都把上一次的计时停止
            timer = setTimeout(change4, 2000)  // 重新开始计时, 
            // 如果两秒内没有再次点击， 则执行最后一个点击的事件函数
        }

        // 防抖一般用于输入框输入事件的信息提示，在输入过程中不执行信息提示，输入完成之后给出信息提示
        
        // 防抖实例：
        var timer;
        function myInput(){
            // 不加防抖的情况
            // getNotice()

            // 加了防抖
            if(timer) clearTimeout(timer)
            timer = setTimeout(getNotice, 1000)
        }
        function getNotice(){
            div.innerHTML = ""
            for (let index = 0; index < 8; index++) {
                div.innerHTML += "<p>"+Math.random()+"</p>"
            }
        }

        // 对于输入框的输入，什么情况下建议添加防抖功能？ 
        // 1，在网速比较慢时，建议加防抖，因为输入的提示信息都是从服务器请求而来的，如果不加防抖， 每次输入都会发起一个数据请求， 如果网速比较慢， 上次请求未结束，下一个请求就发出， 可能造成数据冲突
        // 2， 对于移动端网页， 建议加防抖， 因为输入的提示信息都是从服务器请求而来的， 每次请求都会耗费手机流量，添加防抖， 可以节省流量 


        // 总结： 防抖和节流的概念
        // 防抖： 连续多次调用一个函数， 只执行最后一次， 前边的调用都不执行
        // 节流： 连续多次调用一个函数， 降低执行的次数或频率， 按照一定的频率执行， 

    </script>
</body>
</html>