js中节流和防抖

js中节流和防抖

1.含义
节流:一个事件可以连续多次触发，一定时间段内，让该事件处理函数只会执行一次的方法就叫节流
防抖:持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次
2.个人理解:
节流很好理解就是节约内存,让事件不能连续无间断的触发.
尽量不影响用户体验又能减少事件触发的次数

防抖：举个例子,玩游戏挂机的判定就是防抖,你一段时间没有操作就会触发挂机事件,你只要动一动就不会触发这个事件。
3.实现方法
//防抖

 var input = document.querySelector("input")//获得标签
    var t = null   //定时器
    input.oninput = function () {   //表单的oninput事件
        if (t != null) {        
            clearTimeout(t)
        }
        t = setTimeout(() => { console.log(this.value) }, 500)
    }

//节流` ，懂其一即可
方法一

var flg = true
    onscroll = function () {
        if (flg) {
            console.log("sdsdsd");
            setTimeout(() => {
                flg = true
            }, 500)
        }
        flg = false
    }

方法二

window.addEventListener("scroll", jlf(
        function () {
            console.log("ssss")
        }, 500))




    function jlf(fn, yc) {     //节流函数
        time = new Date()
        return () => {
            if (time - new Date() + yc < 0) {
                fn()
                time = Date.now()
            }
        }
    }

个人理解，有异议以官方为标准