什么是防抖

1.函数防抖 : 单位时间内，频繁触发事件，只会触发最后一次

2.经典应用场景：输入框输入事件

3.函数防抖流程： 3.1 声明全局变量存储定时器ID 3.2 每一次触发事件, 先清除上一次定时器。然后将事件处理代码放入本次定时器中

<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>Document</title>
</head>

<body>
    <input type="text" placeholder="请输入文本">

    <script>
        // 1.设置一个变量存储定时器
        let time = null
        document.querySelector('input').addEventListener('input', function () {

            // 清除上一次的定时器
            clearTimeout(time)
            // 设置一个定时器,把当前定时器的值,存到上一次
            time = setTimeout( () => {
                console.log(this.value)

            }, 10000)
        })


    </script>
</body>

</html>

什么是节流

1.函数防抖 : 单位时间内，频繁触发事件，只会触发一次

2.经典应用场景：滚动条事件 3.函数防抖流程：

3.1 声明全局变量存储上一次触发交互时间 3.2 每一次触发事件, 获取当前时间与上一次时间做比较。判断是否超过节流间隔 3.3 如果超过节流时间，则执行事件处理代码。并且存储本次触发时间。

<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>Document</title>
    <style>
        body{
            width: 3000px;
            height: 3000px;
        }        
    </style>
</head>
<body>
    

    <script>
        let lastTime = null
        window.onscroll = function(){
            //判断时间间隔
            let currentTime = Date.now()
            if( currentTime - lastTime >= 500 ){
                console.log('执行滚动条事件处理代码')
                //存储本次触发时间
                lastTime = currentTime
            }
        }
    </script>
</body>
</html>

因为我不会防抖和节流,被公司降薪了!!!

什么是防抖

什么是节流