『JavaScript』全面解析JavaScript中的防抖与节流技术及其应用场景 |
您所在的位置：网站首页 › 防抖与节流区别 › 『JavaScript』全面解析JavaScript中的防抖与节流技术及其应用场景 |
『JavaScript』全面解析JavaScript中的防抖与节流技术及其应用场景
|
防抖是一种优化技术，用于减少短时间内连续触发同一事件时的处理次数。当一个事件被频繁触发时，防抖函数会忽略后续的触发，直到一段时间内没有新的触发发生，再执行一次事件处理器。 2. 防抖的使用场景防抖常用于以下场景： 输入框实时搜索或自动完成：当用户在输入框中快速输入时，防抖可以确保在用户停止输入一段时间后再发起请求，避免频繁请求服务器。地图拖拽或其他持续性用户交互：在地图拖拽等持续性用户交互中，防抖可以减少不必要的计算和渲染，提高性能。 3. 防抖的实现以下是一个简单的防抖功能实现： 在这个实现中，创建了一个返回新函数的debounce函数。新函数内部清除已有的定时器，并设置一个新的定时器，在指定的延迟时间后执行原函数。 DOCTYPE html> Debounce Example // 防抖函数实现 function debounce(func, delay) { let timeoutId; // 定时器ID用于清除定时器 return function() { clearTimeout(timeoutId); // 清除已有的定时器 const context = this; const args = arguments; // 设置一个新的定时器，在指定的延迟时间后执行原函数 timeoutId = setTimeout(function() { func.apply(context, args); }, delay); }; } // 获取输入框元素 let searchInput = document.getElementById("searchInput"); // 使用防抖处理输入框的keyup事件 searchInput.addEventListener("keyup", debounce(function() { console.log("Search input changed, debounced."); }, 300)); // 延迟时间为300毫秒
节流是一种优化技术，用于限制在同一时间段内事件处理器的执行次数。即使事件被频繁触发，节流函数也会确保事件处理器在每个时间段内只执行一次。 2. 节流的使用场景节流常用于以下场景： 窗口大小改变时的布局调整：当用户快速调整窗口大小时，节流可以确保在每个时间段内只执行一次布局调整操作，避免过度渲染。滚动事件的处理：滚动事件可能会非常频繁地触发，节流可以限制滚动事件处理器的执行频率，提高性能。 3. 节流的实现以下是一个简单的节流功能实现： 在这个实现中，创建了一个返回新函数的throttle函数。新函数内部检查当前时间与上一次执行时间的差值是否大于指定的延迟时间，如果是，则执行原函数并更新上一次执行时间。 DOCTYPE html> Throttle Example .container { width: 100%; height: 100vh; background-color: lightblue; } // 节流函数实现 function throttle(func, delay) { let lastExecution = 0; // 记录上一次执行的时间 return function() { const currentTime = Date.now(); // 获取当前时间 if (currentTime - lastExecution > delay) { // 如果距离上一次执行的时间大于延迟时间 func.apply(this, arguments); // 执行原函数 lastExecution = currentTime; // 更新上一次执行的时间 } }; } // 获取容器元素 let container = document.querySelector(".container"); // 使用节流处理窗口大小改变事件 window.addEventListener("resize", throttle(function() { console.log("Window resized, throttled."); }, 200)); // 延迟时间为200毫秒
在实际开发中，选择防抖还是节流取决于具体的需求： 如果需要在用户停止操作一段时间后再执行事件处理器，例如搜索框输入完成后才发起请求，应选择防抖。如果需要在每个时间段内最多执行一次事件处理器，但限制执行频率，例如滚动事件的处理，应选择节流。
|
📣读完这篇文章里你能收获到
【本文地址】
今日新闻 |
推荐新闻 |