防抖和节流的区别

一、理解防抖和节流

防抖：在单位时间内频繁触发事件，只有最后一次生效

节流：在单位时间内频繁触发事件，只生效一次（也就是只有第一次生效）

防抖和节流都是性能优化的一种手段

二、相同点

1.都可以通过使用 setTimeout 来实现

2.都可以降低回调执行频率，节省计算资源

三、不同点

定义不同

函数防抖：一段时间内连续触发事件，只执行最后一次

函数节流：一段事件内只执行一次

四、代码实现

1、防抖

var btn = document.getElementById("btn")
    var time = null
    btn.onclick = function () {
        clearTimeout(time)
        time = setTimeout(function () {
            console.log("点击了");
        }, 5000)
    }

2、节流

 var btn = document.getElementById("btn")
    var flag = true
	btn.onclick = function () {
        if (flag) {
            console.log("点击了");
            flag = false
            setTimeout(function () {
                flag = true
            }, 5000)
        }
    }