防抖与节流

有这样一种应用场景，在滚动事件中复杂的取值或者频繁的触发一个事件，这是很影响性能容易导致页面卡顿。所以得合并多次请求进行精确操作。

函数防抖

函数防抖：单位时间内，频繁触发事件，只会触发最后一次
函数防抖实际开发应用场景：实时获取输入框文本

<!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>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入文本">

    <script>
        /* 
        1.函数防抖 :  单位时间内，频繁触发事件，只会触发最后一次
        2.经典应用场景 ： 输入框输入事件
        3.函数防抖流程 ：
            3.1 声明全局变量存储定时器ID
            3.2 每一次触发事件, 先清除上一次定时器。 然后将事件处理代码放入本次定时器中
        */

        let timeID = null
        document.querySelector('input').oninput = function(){
            
            //清除上一次定时器
            clearTimeout(timeID)
            //开启本次定时器. 500ms内用户没有触发，自动执行定时器代码。 
            timeID = setTimeout(()=>{
                console.log(`发送ajax请求，搜索内容为${this.value}`)
            },500)            
        }
    </script>
</body>
</html>

函数节流

函数节流：单位时间内，频繁触发事件，只会触发一次
函数节流应用场景：解决高频事件，频繁触发事件浪费性能

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

    <script>
        /* 
        1.函数防抖 :  单位时间内，频繁触发事件，只会触发一次
        2.经典应用场景 ： 滚动条事件
        3.函数防抖流程 ：
            3.1 声明全局变量存储上一次触发交互时间
            3.2 每一次触发事件, 获取当前时间  与 上一次时间做比较。判断是否超过节流间隔
            3.3 如果 超过节流时间，则执行事件处理代码。 并且存储本次触发时间。
        */

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