Mousewheelerトリガを収集してから関数を呼び出す

Question

javascript/jqueryで簡単なズームエフェクトを作成しますが、これを少しスムーズにするために苦労します。

delta < 0が、私は私のコンテナの幅を減少させたときに、私は、私のコンテナの幅を増やす delta > 0

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

。 を参照してくださいコードは、基本的な例のためにスニペット：

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()を使用して、一つの変数にすべてのdelta値を収集、1000msのにそれを設定してみました：

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

タイムアウトが残っている場合でも、これは動作しません。通過すると、ズーム効果がすべてトリガーされます。

setTimeout()が終了した後に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

のparam：

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