防抖和节流（小白文）

文章目录

• • 什么是防抖和节流？
  • • 防抖（Debouncing）
    • 节流（Throttling）
  • 如何实现防抖和节流？
  • • 防抖的实现
    • 节流的实现
  • 结语

大家好！今天我们来聊聊两个让网站跑得更快的小技巧：防抖和节流。这两个词听起来可能有点专业，别担心，我会用简单的比喻来解释，保证你一听就懂。

什么是防抖和节流？

防抖（Debouncing）

想象一下，你在玩一款游戏，游戏里的敌人不停地跳来跳去，你想要射击它们。但是，如果你每次看到敌人就射击，子弹就会乱飞，而且很快就用完了。所以，你决定等敌人停下来再射击。这就是“防抖”的概念。

在网站开发中，防抖技术通常用在搜索框上。比如，你在一个购物网站上搜索商品，你每输入一个字母，网站就去找商品，这样会很累，而且效率不高。所以，我们让网站等你停止输入一段时间后再去搜索，这样就能节省资源，让网站更快。

节流（Throttling）

再想象一下，你在给花园浇水，如果你一直开着水龙头，水很快就会流光，而且可能会把植物淹死。但是，如果你控制好水龙头，让水流得慢一些，就能既浇好花又节约水。这就是“节流”的概念。(水=用户的请求，植物=服务器)

在网站开发中，节流技术通常用在滚动页面的时候。比如，你滚动页面，网站就会显示新的图片或者内容。如果每次滚动都去加载新的内容，网站就会变得很慢。所以，我们让网站在一定时间内只加载一次内容，这样就能保持网站的流畅。

如何实现防抖和节流？

防抖的实现

防抖的实现需要用到定时器，就像你玩游戏时等待敌人停下来再射击一样。下面是一个简单的防抖函数实现：

function debounce(func, wait) {
  let timeout; // 用来存储定时器的ID
  return function() { // 返回一个新的函数
    const context = this; // 保存当前的上下文
    const args = arguments; // 保存所有的参数
    clearTimeout(timeout); // 清除之前的定时器
    timeout = setTimeout(() => { // 设置一个新的定时器
      func.apply(context, args); // 执行原来的函数
    }, wait);
  };
}

使用这个函数，你可以这样包装你的搜索函数：

const search = debounce(function() {
  // 执行搜索操作
}, 300); // 300毫秒内没有新的输入，执行搜索

节流的实现

节流的实现需要记录上一次执行的时间，就像你控制水龙头一样。下面是一个简单的节流函数实现：

function throttle(func, limit) {
  let lastRan = 0; // 记录上一次执行的时间
  return function() {
    const context = this;
    const args = arguments;
    const now = Date.now(); // 获取当前时间
    if (now - lastRan >= limit) { // 如果距离上次执行超过了限制时间
      func.apply(context, args); // 执行原来的函数
      lastRan = now; // 更新上一次执行的时间
    }
  };
}

使用这个函数，你可以这样包装你的滚动事件处理函数：

window.addEventListener('scroll', throttle(function() {
  // 执行滚动操作
}, 100)); // 每100毫秒最多执行一次

结语

防抖和节流就像是网站开发中的两个小工具，它们可以帮助你的网站跑得更快，用户体验更好。希望这篇文章能够帮助你理解这两个概念，并在你的项目中应用它们。如果你有任何疑问，或者想要了解更多关于网站优化的知识，欢迎留言讨论！