JavaScript一句话讲清楚防抖与节流

刚刚觉醒的小菜鸡

已于 2024-03-09 17:09:20 修改

阅读量487

点赞数 15

分类专栏： JavaScript 文章标签： okhttp

于 2024-03-09 15:19:00 首次发布

本文链接：https://blog.csdn.net/wang1664178416/article/details/136584096

版权

JavaScript 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

防抖：n秒后再执行再在执行某项事件，若是n秒内重复触发，则重新计时（王者回城）

节流：n秒内只运行一次，若在n秒反复触发，只有一次生效（王者技能）

实现方式

防抖实现

function debounce(func,delay){
    let timeoutId
    
    return function(){
        const context = this //保存this指向
        const args = arguments //拿到event对象
        
        clearTimeout(timeoutId)
        timeoutId = setTimeout(() => {
            func.apply(context,args)
        },delay)
    }
}

防抖的引用场景常见的有

搜索框输入，当用户输入搜索时，使用防抖函数来延迟发送请求，以减少不必要请求

代码模拟实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Box</title>
</head>
<body>
<input type="text" id="searchInput" placeholder="Type something...">
<div id="searchResults"></div>

<script>
function debounce(func, delay) {
    let timeoutId;
    
    return function() {
        const context = this;
        const args = arguments;
        
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}

// 模拟搜索函数
function search(query) {
    // 这里可以执行搜索操作，例如发送 AJAX 请求
    // 这里只是简单地显示搜索结果
    document.getElementById('searchResults').innerText = 'Searching for: ' + query;
}

const searchInput = document.getElementById('searchInput');

// 使用防抖函数来处理搜索框输入事件
searchInput.addEventListener('input', debounce(function(event) {
    const query = event.target.value;
    search(query);
}, 300)); // 设置防抖延迟时间为 300ms
</script>
</body>
</html>

窗口大小调整，当窗口调整时，使用防抖函数来延迟调整布局，以提高性能

节流实现

function throttled2(fn, delay = 500) {
    let timer = null
    return function (...args) {
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, args)
                timer = null
            }, delay);
        }
    }
}

节流常见的应用场景有

页面滚动，滚动页面时可能会触发一些操作，比如加载更多内容或者执行动画效果，使用节流能够确保这些操作在用户滚动频率过快时不会导致性能问题。

// 定义一个节流函数
function throttle(func, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastCall >= delay) {
      func(...args);
      lastCall = now;
    }
  };
}

// 实际要执行的滚动处理函数
function handleScroll() {
  console.log("处理滚动事件");
  // 在这里编写你的滚动处理逻辑
}

// 使用节流函数包装滚动处理函数，限制执行频率为每500毫秒一次
const throttledScroll = throttle(handleScroll, 500);

// 添加滚动事件监听器
window.addEventListener("scroll", throttledScroll);