c++ 传入回调函数 参数没有传入_性能优化之防抖函数debounce

在页面上的某些事件触发频率非常高，比如滚动条滚动、窗口尺寸变化、鼠标移动等，如果我们需要注册这类事件，不得不考虑效率问题。而防抖函数就是为了解决这一类问题而出现的。

前言

在页面上的某些事件触发频率非常高，比如滚动条滚动、窗口尺寸变化、鼠标移动等，如果我们需要注册这类事件，不得不考虑效率问题。

当窗口尺寸发生变化时，哪怕只变化了一点点，都有可能造成成百上千次对处理函数的调用，这对网页性能的影响是极其巨大的。

于是，我们可以考虑，每次窗口尺寸变化、滚动条滚动、鼠标移动时，不要立即执行相关操作，而是等一段时间，以窗口尺寸停止变化、滚动条不再滚动、鼠标不再移动为计时起点，一段时间后再去执行操作。

例子

我们来列举一个关于鼠标移动的例子：

<div id="container">div>

div{
        height: 200px;    line-height: 200px;    text-align: center; color: #fff;    background-color: #444;    font-size: 25px;    border-radius: 3px;}

let count = 1;let container = document.getElementsByTagName('div')[0];function updateCount() {
        container.innerHTML = count ++ ;}container.addEventListener('mousemove',updateCount);

我们来看一下效果：

我们可以看到，鼠标从左侧滑到右侧，我们绑定的事件执行了119多次

这个例子很简单，浏览器完全反应的过来，但如果在频繁的事件回调中做复杂计算，很有可能导致页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作。

为了处理这个问题，一般有两种解决方案：

• debounce 防抖

  </