【进阶】前端技术要点

前端进阶技术要点系列文章目录

提示：收录一些进阶技术要点
进阶技术要点

---

提示：进阶技术要点

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：收录一些前端技术要点。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、技术要点

1.防抖节流

• 防抖：你狂点按钮也没有，等你冷静下来事件才会触发。
• 节流：游戏里面的技能冷却功能。

① 防抖（Debounce）示例：

防抖的原理是在事件触发后等待一段时间，如果在这段时间内再次触发该事件，就重新计时。只有在等待时间过去后没有再次触发事件，才会执行相应的操作。

function debounce(func, delay) {
  let timeoutId;

  return function (...args) {
    clearTimeout(timeoutId);

    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 示例应用场景：输入框搜索
const searchInput = document.getElementById('search-input');

function handleSearch() {
  // 执行搜索操作
  const keyword = searchInput.value;
  console.log('Searching for:', keyword);
}

const debounceSearch = debounce(handleSearch, 300);

searchInput.addEventListener('input', debounceSearch);

我们使用防抖函数来处理输入框的搜索操作。当用户在输入框中输入时，会触发 input 事件，并调用 debounceSearch 函数。如果用户连续输入，debounce 函数会清除之前的计时器，并在延迟时间后重新设置计时器。只有当用户停止输入一段时间后，才会执行 handleSearch 函数进行搜索操作。

② 节流（Throttle）示例：

节流的原理是在一定时间间隔内只执行一次事件，无论事件触发多频繁。

function throttle(func, delay) {
  let lastExecutionTime = 0;

  return function (...args) {
    const currentTime = Date.now();

    if (currentTime - lastExecutionTime >= delay) {
      func.apply(this, args);
      lastExecutionTime = currentTime;
    }
  };
}

// 示例应用场景：滚动事件
function handleScroll() {
  // 执行滚动操作
  console.log('Scrolling...');
}

const throttledScroll = throttle(handleScroll, 200);

window.addEventListener('scroll', throttledScroll);

在上述示例中，我们定义了一个throttle函数，它接受一个函数和时间间隔作为参数。该函数返回一个新的函数，该函数在时间间隔内只会执行一次。
我们使用节流函数来处理滚动事件。当用户滚动页面时，会触发 scroll 事件，并调用 throttledScroll 函数。如果在时间间隔内连续触发滚动事件，throttle 函数会忽略后续的事件，并在时间间隔后再次执行 handleScroll 函数。
防抖和节流都是非常有用的技术，可以帮助我们控制事件的触发频率，从而提高性能和用户体验。具体使用哪种技术取决于你的需求和场景。

总结

提示：这里对文章进行总结：

后续待更新