JS

防抖和节流

防抖（debounce）和节流（throttle）是两种常用的优化高频触发事件的方法。

防抖：当持续触发事件时，一定时间段内没有再触发事件，函数才会执行一次，如果在这个时间段内又触发了事件，则会重新开始延时。常用于输入框搜索、滚动加载等场景。
节流：当持续触发事件时，保证一定时间段内只触发一次事件处理函数。常用于滚动监听、窗口大小改变等场景。

防抖：通俗来说就是我输入一个a后再规定时间内又输入一个a，第二输入触发的时候会删除上一次的定时器，所以只会执行第二次的aa

// 防抖函数 
function debounce(func, wait) { 
  let timeout; 
  return function() { 
    const context = this; 
    const args = arguments; 
    clearTimeout(timeout); 
    timeout = setTimeout(function() { 
      func.apply(context, args); 
    }, wait); 
  }; 
} 

节流:通俗来说就是我输入第一个a后，在a的定时器结束之前，后续所以的输入触发我全都不管

// 节流函数 
function throttle(func, wait) { 
  let timeout; 
  return function() { 
    const context = this; 
    const args = arguments; 
    if (!timeout) { 
      timeout = setTimeout(function() { 
        timeout = null; 
        func.apply(context, args); 
      }, wait); 
    } 
  }; 
} 

触发他们

<style> 
  html{ 
    height: 500vh; 
  } 
</style> 
<body> 
   
</body> 
<script src="./debounce.js"></script> 
<script src="./throttle.js"></script> 
<script> 
  // 防抖示例 
const debouncedSearch = debounce(function() { 
  console.log('防抖搜索'); 
}, 500); 
window.addEventListener('scroll', debouncedSearch); 
 
// 节流示例 
const throttledScroll = throttle(function() { 
  console.log('节流行为'); 
}, 500); 
window.addEventListener('scroll', throttledScroll); 
 
</script> 

JS

防抖和节流​

防抖和节流