本文共 1540 字，大约阅读时间需要 5 分钟。

函数的节流与防抖

防抖是指在一定的时间内再次触发某个事件时，会清空上一次的事件重新开始。如果在制定的时间内没有再次触发该事件，则这个事件才会真正执行。这类似于为重复调用同一功能设置一个等待时间，以避免过于频繁的操作对系统造成影响。

在闭包的概念中，我们通常会认为每次调用某个函数都会从头开始。但实际上，闭包会记住外部函数中所定义的变量。例如：

var bibao = function () {    var counter = 0;    return function () {        return counter += 1;    };};var add = bibao();console.log(add()); // 结果为1console.log(add()); // 结果为2console.log(add()); // 结果为3

在这个例子中，当add被赋值时，实际上返回的是一个函数，这个函数会在每次被调用时增加外部counter变量的值。因此，add()的每次调用都会基于最初的counter变量进行操作，而不会重新初始化一个新的计数器。

防抖和节流在实际项目中的应用非常广泛。例如，在coderwhy的supermall项目中，为了避免频繁刷新页面对性能的影响，采用了防抖技术：

mounted() {    //监听item中图片加载完成    const refresh = this.debounce(this.$refs.scroll.refresh, 200);    this.$bus.$on('itemImageLoad', () => {        refresh();    });},methods: {    debounce(func, delay) {        let timer = null;        return function (...args) {            if (timer) {                clearTimeout(timer);            }            timer = setTimeout(() => {                func.apply(this, args);            }, delay);        };    },    // 其他方法...},

这里，debounce函数用于限制某些操作的频率，只在一定延迟后才执行。这种方法非常适用于那些可能会导致性能问题的频繁操作。

节流的原理与防抖相似，但在于，节流会阻止在相同一段时间内重复触发事件。例如：

function throttle(fn, space) {    let task = null;    return function () {        if (!task) {            task = setTimeout(function () {                task = null;                fn.apply(this, arguments);            }, space);        }    };}let throttleShowLog = throttle(showLog, 3000);

节流通常用于限制事件处理的执行频率，确保在相同时间段内不会多次执行同一操作。这对于处理用户交互事件特别重要。

总的来说，防抖和节流都是优化函数调用频率的重要技术。无论是在浏览器操作还是在单线程环境中，它们都能有效减少不必要的资源消耗，提升应用性能。