基础防抖和节流源码及其讲解

最新推荐文章于 2023-10-24 10:29:44 发布

溱泽

最新推荐文章于 2023-10-24 10:29:44 发布

阅读量110

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/Yxiaodie/article/details/133014245

版权

防抖和节流源码及其讲解

节流
防抖
详细讲解链接

<body>
    <button id="click"></button>
</body>

<script>
    function addNum() {
        clickBtn.innerText = `攻击了${++num}次`
    }

    let num = 0
    let clickBtn = document.getElementById('click')
    clickBtn.innerText = `攻击了${num}次`
    clickBtn.onclick = addNum
</script>

在这里插入图片描述
在上述代码中，我们写了一种直接调用方法并执行了7次

节流

<body>
    <button id="click"></button>
</body>
<script>
    function throttle(fn, delay) {
        let timer = null
        let lastTime = 0
        return function (...args) {
            const currentTime = new Date().getTime()
            if (currentTime - lastTime < delay) {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    lastTime = currentTime
                    fn.apply(this, args)
                }, delay)
            } else {
                lastTime = currentTime
                fn.apply(this, args)
            }
        }
    }

    function addNum() {
        clickBtn.innerText = `攻击了${++num}次`
    }
    let num = 0
    let clickBtn = document.getElementById('click')
    clickBtn.innerText = `攻击了${num}次`
    clickBtn.onclick = throttle(addNum, 2000)
</script>

在这里插入图片描述
在上述代码中我们添加了一段节流函数代码并执行了4次添加函数，但是我们点击按钮的次数不止4次，接下来我们先了解一下节流的概念及其应用场景再对代码进行分析

节流概念

在节流技术中，当一个事件触发后，会立即执行相应的操作，并且在指定的时间间隔内对后续的事件触发进行忽略。只有当下一个事件触发的时间超过指定的时间间隔后，才会再次执行相应的操作。

节流的应用场景

滚动事件：在页面滚动过程中，使用节流可以控制回调函数的执行频率，避免频繁触发导致性能问题。
频繁点击事件：在按钮点击等频繁触发的事件中，使用节流可以限制回调函数的执行次数，提高用户体验。

分析代码

// 首先在 throttle 节流代码中我们接收两个参数一个是用来执行优化后的函数代码，
// 一个是用于节流函数的延时执行时间
    function throttle(fn, delay) {
    	//使用一个变量 timer 来保存定时器 ID，
    	//以控制函数的执行。timer 的作用是用于记录定时器的 ID，
    	//以便在满足时间间隔条件时可以清除旧的定时器并重新设置一个新的定时器。
        let timer = null
        // 最后一次执行代码的时间
        let lastTime = 0
        return function (...args) {
        	//每次点击的时间
            const currentTime = new Date().getTime()
            //判断当前时间是否超过了上一次函数执行时间加上指定的时间间隔，
            //如果是，则立即执行函数并更新上一次执行的时间；
            //否则，节流函数会设置一个定时器，以等待下一个合适的时间再执行函数。
            if (currentTime - lastTime < delay) {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    lastTime = currentTime
                    fn.apply(this, args)
                }, delay)
            } else {
                lastTime = currentTime
                fn.apply(this, args)
            }
        }
    }

防抖

<body>
    <button id="click"></button>
</body>
<script>
    function debounce(fn, delay) {
        let timer = null
        return function (...args) {
            clearTimeout(timer)
            timer = setTimeout(() => {
                fn.apply(this, args)
            }, delay);
        }
    }

    function addNum() {
        clickBtn.innerText = `攻击了${++num}次`
    }

    let num = 0
    let clickBtn = document.getElementById('click')
    clickBtn.innerText = `攻击了${num}次`
    clickBtn.onclick = debounce(addNum, 2000)
</script>

在这里插入图片描述
在上述代码中我们添加了一段防抖函数代码并执行了1次添加函数，但是我们点击按钮的次数不止1次，接下来我们先了解一下防抖的概念及其应用场景再对代码进行分析

防抖概念

在防抖技术中，当一个事件触发后，如果在指定的时间间隔内没有再次触发该事件，才会执行相应的操作。如果在指定的时间间隔内再次触发了事件，则重新开始计时，等待一定时间后执行相应的操作。

防抖的应用场景

输入框搜索：在用户输入搜索关键词时，使用防抖可以避免频繁触发搜索请求，等待用户停止输入后再执行搜索操作。
窗口调整：在窗口调整大小时，使用防抖可以减少频繁触发调整窗口大小所引起的回调函数执行次数。

分析代码

// 首先在 throttle 节流代码中我们接收两个参数一个是用来执行优化后的函数代码，
// 一个是用于节流函数的延时执行时间
    function debounce(fn, delay) {
      	//使用一个变量 timer 来保存定时器 ID，
    	//以控制函数的执行。timer 的作用是用于记录定时器的 ID，
    	//以便在满足时间间隔条件时可以清除旧的定时器并重新设置一个新的定时器。
        let timer = null
        return function (...args) {
        	// 每一次点击都会清除上一次执行的定时器timer
            clearTimeout(timer)
            // 根据用户传入的delay来延时执行要执行的函数
            timer = setTimeout(() => {
                fn.apply(this, args)
            }, delay);
        }
    }