javascript - 更改定时器事件 Javascript 中变量的值

Question

我在定时器中增加一个变量的值。它也在按钮的 onClick 事件中。

setInterval(function () {
    document.getElementById('z_in').addEventListener('click', function () {
        zoom_level = 1;
    }, false);
    document.getElementById('z_out').addEventListener('click', function () {
        zoom_level = 3;
    }, false);
    document.getElementById('rotate').addEventListener('click', function () {
        angle = angle + 10;

    }, false);
    Find(db, minLon, maxLon, minLat, maxLat, zoom_level, angle, stage, layer, i);
    i++;
    //angle = 0;
    console.log();
}, 1000);

这里的 Angular 在每次循环中都增加了太多而不是十倍十倍。这个问题的原因是什么？

Answer 1

如果你只在定时器激活时需要监听器，你可以使用这样的东西:

var timer, i = 0, zoom_level = 1, angle = 0;
var z_in_el = document.getElementById('z_in');
var z_out_el = document.getElementById('z_out');
var rotate_el = document.getElementById('rotate');

function zoomIn(){
    zoom_level = 1;
}
function zoomOut(){
    zoom_level = 3;
}
function rotate(){
    angle += 10;
}

function startTimer(){
    addListeners();
    timer = window.setInterval(function(){
        i++;
        Find(db, minLon, maxLon, minLat, maxLat, zoom_level, angle, stage, layer, i);
        console.log(i, zoom_level, angle);
    }, 1000); 
}

function stopTimer(){
    removeListeners();
    window.clearInterval(timer);
}

function addListeners(){
    z_in_el.addEventListener("click", zoomIn, false);
    z_out_el.addEventListener("click", zoomOut, false);
    rotate_el.addEventListener("click", rotate, false);
}

function removeListeners(){
    z_in_el.removeEventListener("click", zoomIn, false);
    z_out_el.removeEventListener("click", zoomOut, false);
    rotate_el.removeEventListener("click", rotate, false);
}

使用 startTimer() 设置间隔或使用 stopTimer() 删除它。