js函数防抖和函数节流及其使用场景

函数防抖        

         多次触发事件，在一段时间里面只执行最后一次

函数防抖使用场景：【永远在执行最后一次】    回到顶部，立即（实时）搜索   

debounce()  函数进入页面立即执行

debounce()  必须返回函数  事件只能调用函数

callback  形参--传递的是函数

    //防抖函数
    function debounce(callback,time = 300){
        let t;
        return function(){
            //清除上一次触发事件时所设置的定时器
            clearTimeout(t);
            //重新设置定时器
            t =  setTimeout(callback,time);
        }
    }
    //绑定滚动条事件
    window.onscroll = debounce(function(){
        console.log("调用了1次");
    },500);

函数节流

        多次触发事件，在一段时间里面只执行第一次

throlle()  函数进入页面立即执行

throlle()  必须返回函数  事件只能调用函数

callback  形参--传递的是函数

函数节流使用场景：所有的数据请求【按钮】  下拉刷新

    //  函数节流
    function throlle(callback,time){
        //获取上一次触发事件的时间戳
        let lasttime = new Date().getTime();
        return function(){
            //获取当前触发事件的时间戳
            let now = new Date().getTime();
            if(now - lasttime > time){
                callback();
                //将当前时间戳赋值给上一次
                lasttime = now;
            }
        }
    }
    //绑定滚动条事件
    window.onscroll = throlle(function(){
        console.log("调用了1次");
    },1500);