函数防抖与节流

一.函数防抖

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

   2.经典场景 ： 输入框实时输入 oninput; *减少触发输入的频率，提高代码性能

   3.防抖流程 :

         (1)声明一个全局timeID存储定时器id;

         (2)每一次触发事件,先清除上一次定时器，以本次触发为准;

         (3)开启本次定时器; 

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

        //(1)声明一个全局timeID存储定时器id
        let timeID = null
        document.querySelector('input').addEventListener('input',function(){
            
        //(2)每一次触发事件,先清除上一次定时器，以本次触发为准
        clearTimeout(timeID)
        //(3)开启本次定时器
        /* 
        function函数: 定时器this指向window
        箭头函数 : 访问上级作用域this-> input
        */
        timeID = setTimeout( ()=>{
            console.log(`您的搜索内容为${this.value}`) 
        },500) 
    })

二.函数节流

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

   2.应用场景 : 降低高频事件触发频率; * 鼠标移动: onmousemove * 滚动条事件: onscroll

   3.节流流程:

        (1)声明一个全局变量记录 本次触发时间;

        (2)每一次触发事件的时候, 获取当前时间;

        (3)判断 当前时间 - 上一次触发事件 >= 节流间隔;

        (4)存储本次触发事件，用于下一次判断;

     //(1)声明一个全局变量记录 当前触发时间
        let lastTime = null

        //页面滚动条事件
        let i = 1
        window.onscroll = function(){
            //(2)获取现在时间
            let currentTime = Date.now()
            //(3)判断 当前时间 - 上一次触发事件 >= 节流间隔
            if( currentTime - lastTime >= 500 ){
                console.log(`第${i++}次触发`)
                lastTime = currentTime
            }
            
        }