JavaScript学习笔记之防抖与节流

防抖与节流:

相同点:在不影响客户体验的前提下,将频繁的回调函数,进行次数缩减,避免大量计算导致页面卡顿。

不同点:防抖是将多次执行变为最后一次执行,节流是将多次执行变为在规定时间内只执行一次。

防抖:在规定时间内回调函数只能执行一次,如果在规定时间内又触发了该事件,则会重新开始算规定时间。其实就是延迟执行。

应用场景:

  • 输入搜索联想,用户在不断输入值时,用防抖来节约请求资源
  • 按钮点击:收藏,点赞等。

原理:

通过定时器将回调函数进行延迟。如果在规定时间内继续回调,发现存在之前的定时器,则将该定时器清除,并重新设置定时器。

 // 回调函数
    function callback() {
        console.log(1234)
    }
    // 准备包装函数
    // 1,保存定时器标志
    // 2,返回闭包函数
    function debounce(fun, delay = 500) {
        return function (args) {
            let that = this
            let _args = args
            clearTimeout(fun.timer)
            fun.timer = setTimeout(function () {
                fun.call(that, _args)
            }, delay)
        }
    }
    let debounceCallback = debounce(callback, 500)
    // 添加事件监听
    let input = document.getElementById('debounce')
    input.addEventListener('keyup',function (ev) { 
        debounceCallback(ev.value)
    })

节流:当持续触发事件时,在规定时间段内只能调用一次回调函数。如果在规定时间内又触发了该事件,则什么也不做,也不会重置定时器。

应用场景:

  • 鼠标不断点击触发,点击事件在规定时间内只触发一次(单位时间内只能触发一次)
  • 监听滚动事件,比如是否滑到底部自动加载更多

原理:

定时器:通过闭包保存上一次定时状态。然后事件触发时,如果定时器为null(即代表此时间隔已经大于规定时间),则设置新的定时器。到时间后再执行回调函数,并将定时器置为null。

function throttle(fun, delay = 500) {
        let timer
        return function (args) {
            let that = this;
            let _args = args;
            if(!timer) {
                timer = setTimeout(function () {
                    timer = null
                    fun.apply(that, _args)
                },delay)
            }
        }
    }

 

你可能感兴趣的:(javascript)