JS的防抖和节流

在代码的世界遨游

已于 2022-10-24 14:25:08 修改

阅读量295

点赞数

于 2022-10-24 14:22:37 首次发布

本文链接：https://blog.csdn.net/weixin_45153453/article/details/127491450

版权

JavaScript 防抖节流事件处理性能优化

关键词由CSDN通过智能技术生成

防抖:在一定时间内连续触发的,只让最后一次执行

防抖封装:

<body style="height:2400px">

</body>

<script>
    function preventJitter(fn, time) {
        let timeout = null
        let arg = Array.from(arguments)
        arg.splice(0, 2)
        return function () {
            let _this = this
            clearTimeout(timeout)
            timeout = setTimeout(function () {
                console.log(arg);
                fn.apply(_this, arg)
            }, time)
        }
    }
    function scrollHandler(val1, val2) {
        console.log(val1, val2)
    }
    window.addEventListener("scroll", preventJitter(scrollHandler, 300, "页面!!!", "滚动啦!!!"))
</script>

节流:在一次触发执行后,一定时间内,不让它再次执行,时间过了,再次触发才可以执行

节流封装:

function reduceExpenditure(fn, time) {
        let timer = null
        let _this = this
        let arg = Array.from(arguments)
        arg.splice(0, 2)
        return function () {
            if (!timer) {
                let _this = this
                fn.apply(_this,arg)
                timer = setTimeout(function () {
                    timer = null
                }, time)
            }

        }
    }
    function scrollHandler(val1, val2) {
        console.log(val1, val2)
    }
    let ele = document.getElementsByTagName("body")[0]
    ele.addEventListener("click", reduceExpenditure(scrollHandler, 2000, "页面!!!", "点击啦!!!"))