JS防抖和节流

JS防抖+节流

防抖

        let inp = document.getElementById('input') //获取dom元素

        function bandence(fn, delay) {

            let n = null //利用闭包

            return function () {

                if (n !== null) {

                    clearTimeout(n)

                }

                n = setTimeout(() => {

              // console.log(this)

                    // (function () {

                    //     console.log(this)

                    // })()

                    fn.call(this) //利用call 该变this指向由window改为inp对象调用fn函数

                }, daly);

            }

        }

        inp.oninput = bandence(function () {

            // console.log(this)  //相当于在封装函数中的立即执行函数所以指向window

            console.log(this.value) //业务逻辑代码

        }, 500)

 

 节流

        function jieliu(fn) {

            let flag = true //利用闭包

            return function () {

                if (flag) {

                    setTimeout(() => {

                        fn()

                        console.log(flag)

                        flag = true //daley延迟过后改变flag的状态

                        console.log(flag)

                    }, 500);

                }

                console.log(flag)

                flag = false

                console.log(flag)

            }

        }

        window.onscroll = jieliu(function () {

            console.log('页面发生了滚动')//业务逻辑代码

        })

 

 

利用定时器实现防抖和节流，delay为业务代码延迟时间。