防抖、节流

最新推荐文章于 2025-12-18 10:02:55 发布

原创最新推荐文章于 2025-12-18 10:02:55 发布 · 260 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

前端专栏收录该内容

34 篇文章

订阅专栏

本文探讨了JavaScript中常见的页面事件，如滚动、窗口resize、鼠标move和按钮点击等，以及这些事件可能导致的性能问题。为了提高性能，介绍了防抖(debounce)和节流(throttling)两种策略。防抖技术确保在一段时间内不再触发事件后才执行处理函数，而节流则保证在设定的时间间隔内只调用一次函数。文章提供了箭头函数和使用apply改变this的防抖实现，以及节流的实现方法，并通过输入框和滚动条的示例展示了如何应用这些优化技巧。

场景（频繁触发事件）

页面滚动条scroll事件，网页窗口resize事件，

鼠标拖动move事件，按钮频繁点击click事件，

input 快速输入事件......

防抖

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

箭头函数写法：

  function debounce(func, delay) {
    var timer = 0
    return function(e) {
        clearTimeout(timer)
        timer = setTimeout(() => {
          func(e)
        }, delay)
    }
  }

apply 改变 this 写法：

  function debounce(func, delay) {
    var timer
    return function(e) {
        // console.log('timer', timer, e.target.value)
        clearTimeout(timer)
        var that = this
        var args = arguments

        timer = setTimeout(function(){
          func.apply(that, args);
        },delay)
    }
  }

demo

1. 输入框：

  var validate = debounce(function(e) {
    console.log('--调接口--', e.target.value)
  }, 1000)

  document.querySelector("input").addEventListener('input', validate)

2. 滚动条：

  function showTop () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
    console.log(scrollTop)
  }
  window.onscroll = debounce(showTop, 1000)

节流

当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

function throttling(fn, delay){
	let timer

	return function () {
	  if (!timer) {
		  timer = setTimeout(() => {
            fn()
            clearTimeout(timer)
            timer = null
          }, delay)
	  }
	}
}