原生js_节流函数

节流函数的作用:
函数节流是为了解决有时候连续触发某个事件或者连续滚动而频繁的操作DOM以至于浏览器可能奔溃的问题

节流函数思路：
限制一个函数，在一定时间内，只能执行一次

	let oBtn=document.getElementById('show');
    let oBox=document.getElementById('box');
    /*
        handle:buy函数
        wait:在规定在时间内只能执行一次 
    */
    //第一次执行函数的时候，给lastTime赋值为0，确保是第一次执行
    let lastTime = 0;
    function throttle (handle, wait) {
        console.log(lastTime)
        return function (e) {
            //给你newTime赋值当前时间
            let nowTime = new Date().getTime()
            //输出当前时间
            console.log("newTime是" + nowTime)
            //判断 用刚才给newTime赋值的时间 - 函数开始时给lastTime赋值的0
            //判断为true 进入里面
            //为false的时候 不进入
            if (nowTime - lastTime > wait) {
                // console.log(nowTime)//当前时间
                // console.log(lastTime)//函数第一次执行的时候，lastTime为0，之后每一次执行的时候，lastTime是上一次执行的时间
                // console.log(wait)//wait 为间隔多少时间才能执行下一次
                //如果进入了函数，执行bug函数
                handle(); 
                //给lastTime赋值为nowTime的值
                lastTime = nowTime;
            }
            // console.log(e)
        }
    }
    function buy(){
        //给上面的div 赋值，函数每执行一次，+1
        oBox.innerText = parseInt(oBox.innerText)+1
        //打印上面div的值
        console.log(oBox.innerText)
    }
    
    //点击按钮button，执行函数
    oBtn.onclick = throttle(buy, 1000)

使用场景
懒加载、滚动加载、加载更多或监听滚动条位置；
百度搜索框，搜索联想功能；
防止高频点击提交，防止表单重复提交；