Собрать триггер Mousewheeler, а затем функцию вызова

Question

Я создаю простой эффект масштабирования с помощью 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 я увеличить ширину моего контейнера, когда delta < 0 я уменьшить ширину моего контейнера. См Фрагмент кода для базового примера:

document.addEventListener("mousewheel", mouseWheelHandler, false); 
 
document.addEventListener("DOMMouseScroll", mouseWheelHandler, false); 
 
function mouseWheelHandler(e) { 
 
    var current_width = $('div').width(); 
 
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 
 
    if(delta == -1) { 
 
     $('div').css('width', current_width/1.1); 
 
    } else { 
 
     $('div').css('width', current_width * 1.1); 
 
    } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="background-image:url(https://placehold.it/500x500);height:500px;width:500px;">

Я знаю, что хочу, чтобы собрать прокручивает пользовательские представления и только один раз прокручивать. Я попытался с помощью setTimeout() и установить его на 1000 мс, собрать все delta значения в одной переменной, а затем увеличить в том, что часто:

document.addEventListener("mousewheel", mouseWheelHandler, false); 
 
document.addEventListener("DOMMouseScroll", mouseWheelHandler, false); 
 
var zoom_factor = 0; 
 
function mouseWheelHandler(e) { 
 
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 
 
    setTimeout(function(){ 
 
    zoom_factor = zoom_factor + delta 
 
    console.log(zoom_factor); 
 
    }, 1000); 
 
    zoom(zoom_factor); 
 
} 
 
     
 

 
function zoom(zoom_factor) { 
 
    var current_width = $('div').width(); 
 
    var new_width = current_width; 
 
    if(zoom_factor > 0) { 
 
    for(var i = 0; i < zoom_factor; i++) { 
 
     new_width = new_width * 1.1 
 
    } 
 
    } else if (zoom_factor < 0) { 
 
    zoom_factor = zoom_factor * -1 
 
    for(var i = 0; i < zoom_factor; i++) { 
 
     new_width = new_width/1.1 
 
    } 
 
    } 
 
    $('div').css('width',new_width); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div style="background-image:url(https://placehold.it/500x500);height:500px;width:500px;">

Это не работает, потому что даже когда тайм-аут еще передача, все эффекты масштабирования запускаются.

Есть ли способ позвонить zoom() после того, как setTimeout() закончен и вызывается только один раз?

Answer 1

Попробуйте это:

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; 
} 

Answer 2

парам в settimeout():

function mouseWheelHandler(e) { 
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 
    setTimeout(function(){ 
    zoom_factor = zoom_factor + delta 
    console.log(zoom_factor); 
    }, 1000, zoom(zoom_factor)); 
} 

document.addEventListener("mousewheel", mouseWheelHandler, false); 
 
document.addEventListener("DOMMouseScroll", mouseWheelHandler, false); 
 
var zoom_factor = 0; 
 
function mouseWheelHandler(e) { 
 
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 
 
    setTimeout(function(){ 
 
    zoom_factor = zoom_factor + delta 
 
    console.log(zoom_factor); 
 
    }, 10, zoom(zoom_factor)); 
 
} 
 
     
 

 
function zoom(zoom_factor) { 
 
    var current_width = $('div').width(); 
 
    var new_width = current_width; 
 
    if(zoom_factor > 0) { 
 
    for(var i = 0; i < zoom_factor; i++) { 
 
     new_width = new_width * 1.1 
 
    } 
 
    } else if (zoom_factor < 0) { 
 
    zoom_factor = zoom_factor * -1 
 
    for(var i = 0; i < zoom_factor; i++) { 
 
     new_width = new_width/1.1 
 
    } 
 
    } 
 
    $('div').css('width',new_width); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div style="background-image:url(https://placehold.it/500x500);height:500px;width:500px;">