函数防抖与节流

函数防抖

   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
            }
            
        }