js防抖与节流

防抖   一段时间内执行多次方法只执行最后一次

---

 

        function debounce(delay, callback) {

            let clearTime;

            return function (value) {

                clearTimeout(clearTime)

                clearTime = setTimeout(() => {

                    callback(value)

                }, delay);

            }

        }

        function callback(value) {

            console.log(value)

        }

        let resolveFunc = debounce(1000, callback)

        ipt.addEventListener('keyup', function (e) {

            resolveFunc(e.target.value)

        })

 

节流　一段时间内执行多次方法 只在规定时间内执行

---

 

  <button id="btn">节流按钮</button>

    <script>

        let btn = document.getElementById('btn')

        function func(callback, delay) {

            let timeOut;

            return function () {

                if (!timeOut) {

                    timeOut = setTimeout(() => {

                        callback()

                        timeOut = null

                    }, delay);

                }

            }

        }

        function callback() {

            console.log('节流')

        }

        btn.onclick = func(callback, 1500)