js防抖和节流的区别

js yekong

JavaScript中的防抖(Debounce)和节流(Throttle)都是优化高频率执行代码的技术手段,尤其在处理像窗口resize、滚动、输入框内容校验等事件时非常有用。它们的主要区别在于如何限制函数的执行频率。

函数防抖(Debounce)

函数防抖的核心思想是在事件被触发一定时间后再执行回调,如果在这个等待时间内又被触发,则重新计时。这意味着,只有当事件停止触发一段时间后,事件处理函数才会执行一次。如果设定的时间到来之前,又一次触发了事件,就重新开始延时。这种机制使得函数防抖非常适合那些对连续事件响应不是必须的场景。

function debounce(fn, wait) {
  var timeout = null;
  return function() {
    if(timeout !== null) clearTimeout(timeout);
    timeout = setTimeout(fn, wait);
  }
}

函数节流(Throttle)

函数节流的核心思想是在一定时间间隔内只执行一次回调。无论事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数。这种机制使得函数节流非常适合那些对连续事件响应必须的场景,比如滚动加载、图片懒加载等。

var throttle = function(func, delay) {
  var prev = Date.now();
  return function() {
    var now = Date.now();
    if (now - prev >= delay) {
      func();
      prev = Date.now();
    }
  }
}

总的来说,函数防抖是“等你停止触发后再执行”,而函数节流是“按时间间隔执行”。防抖适用于连续的事件触发不需要立即响应的场景,而节流适用于连续的事件触发需要定时响应的场景.

喜欢