函数防抖、节流：避免短时间内频繁触发执行函数

1.函数防抖

含义：触发高频事件后 n 秒后函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间；

举例：电脑1分钟无操作进入休眠状态，在60s内鼠标移动，重新计时一分钟

实现：先清除定时器标识，再设置定时器执行操作

需求：鼠标经过按钮，停止移动时，1s后仅打印一次

    var btn=document.getElementById('btn')
    
    //防抖函数
   const db = (fn, time) => {
        var timeout = null
        return function () {
            if(timeout){
                clearTimeout(timeout)
            }
            timeout = setTimeout(() => {
                fn.apply(this, arguments)
            }, time)
        }
    }
    //测试
    const input=()=>{
        console.log('111')
    }
    btn.addEventListener('mouseover',db(input,1000))

2.函数节流

含义：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率

举例：

实现：

1.设置标识flag=true,当标识为true时,设置flag=false,并定时执行操作（重新将flag=true)；当标识为false时返回。

2.将定时器标识设为空，不存在定时器时执行定时操作执行函数并将定时器标识设为空

需求：鼠标经过按钮，每隔1s打印一次

//节流函数
//第一种
//   const thr = (fn, time) => {
//       var flag = true;
//        return function () {
//            if (flag) {
//                flag = false
//                setTimeout(() => {
//                    flag = true
//                    fn.apply(this, arguments)
//               }, time)
//            } else {
//                return
//            }
//        }
//   }
//第二种
    const thr = (fn, time) => {
        var timer = null
        return function () {
            if (!timer) {
                timer = setTimeout(() => {
                    timer = null
                    fn.apply(this, arguments)
                }, time)
            }
        }
    }
//测试
    const ipt = () => {
        console.log('111')
    }
    btn.addEventListener('mouseover', thr(ipt, 1000))