JavaScript防抖以及节流实现以及讲解（附带闭包讲解）

最新推荐文章于 2024-10-10 10:50:43 发布

大笨峰

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量430

点赞数 1

分类专栏： JS基础文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/returndbf/article/details/123169232

版权

JS基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的闭包概念，通过示例解释了其原理，即函数内部变量在函数执行后仍能保持状态。接着探讨了防抖和节流两种优化技术，防抖函数确保在设定时间内只执行最后一次调用，而节流函数则限制函数在特定时间段内执行一次。文章通过代码示例清晰地展示了防抖和节流函数的实现方式，帮助读者理解这两种性能优化策略在实际开发中的应用。

摘要由CSDN通过智能技术生成

在学习防抖之前要先了解闭包

function fn(){
	let num = 0
	return function(){
		return ++num
	}
}
let foo = fn()
console.log(foo())//1
console.log(foo())//2

在JacaScript中，函数以及其中定义变量在执行完毕之后是应该销毁的，但是上述fn函数返回值为一个匿名函数，匿名函数引用并返回上层作用域定义的num变量，之后匿名函数被赋给foo，因为匿名函数里引用上层变量num，导致num无法销毁，所以每次执行foo()，num都会改变，变量不会被销毁。

知道闭包之后了解防抖和节流的区别：

防抖：指定时间内多次执行指定函数只执行最后一次
节流：指定时间内指定函数只执行一次

防抖函数：

function debounce(fn,delay=500){
    let timer = null 
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay) 
    }
}

定义debounce函数，接收参数为可能会被多次执行的函数以及指定时间，防抖函数参数中fn函数（会被多次执行的函数）在定时器指定时间结束后执行，如果在定时器执行时间还没到delay指定时间时再次触发防抖函数，因为闭包的缘故，timer已经不是null，所以if判断为true，将会阻止定时器执行，再重新开始进行定时器延迟执行指定函数fn。

节流函数：

function throttle(fun, delay=500) {
        let pre = 0
        return function () {
            let now = new Date()
            if (now - pre > delay) {
                fun()
                pre = now
            }
        }
    }

定义throttle函数，参数同防抖函数，pre为上次执行函数的时间，返回的匿名函数中now为当前时间，匿名函数的变量在执行后会被销毁，所以每次now都是当前时间，如果当前时间的时间戳减去上次执行函数的时间戳大于延迟执行时间，表示指定时间已经经过，将会执行函数，如果不大于，表示还在指定时间内，将不执行函数。在执行函数后，pre被赋值给这次执行函数的时间，在下次执行时，pre继续和now进行比较判断是否执行指定函数。