Javascript 收集Mouseweeler触发器，然后调用函数

我用javascript/jquery构建了一个简单的缩放效果，但很难让这个效果更平滑

document.addEventListener("mousewheel", mouseWheelHandler, false);
document.addEventListener("DOMMouseScroll", mouseWheelHandler, false);
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

当

delta>0

I增大容器的宽度时，当

delta<0

I减小容器的宽度时。 有关基本示例，请参见代码段：

document.addEventListener（“mousewheel”，mouseWheelHandler，false）；
文件。添加的文件列表（“DOMMouseScroll”，mouseWheelHandler，false）；
功能mouseWheelHandler（e）{
var current_width=$（'div'）.width（）；
var delta=数学最大值（-1，数学最小值（1，（e.车轮delta | |-e.细节））；
如果（增量==-1）{
$（'div'）.css（'width'，current_width/1.1）；
}否则{
$（'div'）.css（'width'，current_width*1.1）；
}
}

设置超时（）中的参数


document.addEventListener（“mousewheel”，mouseWheelHandler，false）；
文件。添加的文件列表（“DOMMouseScroll”，mouseWheelHandler，false）；
var zoom_因子=0；
功能mouseWheelHandler（e）{
var delta=数学最大值（-1，数学最小值（1，（e.车轮delta | |-e.细节））；
setTimeout（函数（）{
缩放系数=缩放系数+增量
控制台日志（缩放系数）；
}，10，缩放（缩放系数）；
}
功能缩放（缩放系数）{
var current_width=$（'div'）.width（）；
var new_width=当前_width；
如果（缩放系数>0）{
对于（变量i=0；i


试试这个：

var zoom_factor = 0;
var timeout;
function mouseWheelHandler(e) {
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
  // reset timeout
  clearTimeout(timeout);

  timeout = setTimeout(function(){
    // call zoom() once
    zoom(zoom_factor);

    // reset zoomfactor
    zoom_factor = 0;
  }, 1000);

  // Calculate zoom factor
  zoom_factor = zoom_factor + delta;
}

var zoom_factor = 0;
var timeout;
function mouseWheelHandler(e) {
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
  // reset timeout
  clearTimeout(timeout);

  timeout = setTimeout(function(){
    // call zoom() once
    zoom(zoom_factor);

    // reset zoomfactor
    zoom_factor = 0;
  }, 1000);

  // Calculate zoom factor
  zoom_factor = zoom_factor + delta;
}