Javascript: событие изменения размера дважды срабатывает при каждом событии

Question

У меня есть объект «Graphics» в JS, который я использую в качестве контейнера для элемента canvas.

Графические объекты просто берет в холст и устанавливает его ширина, высота и т.д.

я эта функция вызывается на событие изменения размера:

Graphics.prototype.resize = function(){ 

    this.canvas.width = (this.canvas.width > window.innerWidth) 
         ? window.innerWidth : someDefaultVar; 

    //And same for width... 

    alert(this.canvas.width); //Alert for test purposes 
}; 

Предполагая, что окно canvas.width < .innerWidth и window.innerWidth = 205 это предупреждение выход для каждого изменения размера:

Оригинал Ширина

Я озадачен тем, почему его зовут дважды, что приводит к тому, что холст не изменяет размер.

В моей анимации цикла я использую объект как так:

window.addEventListener("load",Main,false); //Added from comment response, 
              //load eventlistener 

function Main(){ 
    var canvas = new Graphics(width, height ..); //Object containing the canvas 

    window.addEventListener("resize", OnResize,false); //Add the event listener 
                 // for resize 

    function OnResize(){ 

     canvas.resize(); //Call the function named above 
    } 

    function AnimLoop(){ 

     canvas.draw(); 
     requestAnimationFrame(AnimLoop); 
    } 

    AnimLoop(); //Call AnimLoop entering starting the animation 
} 

Можно ли определить проблему?

Заранее спасибо

Answer 1

Изменение размеров событие может быть выброшен в несколько раз по различным причинам. То, что вы можете сделать, - это реализовать таймер, чтобы ваш размер изменялся только тогда, когда события не были выбрасываны в связку.

Например:

function Main(){ 
    var canvas = new Graphics(width, height ..); 

    /// add a var in main to hold the timer request id  
    var resizeTimer; 

    window.addEventListener("resize", OnResize,false); 

    function OnResize(){ 

     /// reset timeout every time resize is triggered 
     /// no need to check the value 
     clearTimeout(resizeTimer); 

     /// setup timer so that when the delay between events 
     /// are higher than 200 ms call resize canvas.. 
     resizeTimer = setTimout(canvas.resize, 200); 
    } 

    ...  
} 

Что здесь происходит, когда изменения размера события запуска обратного вызова он будет ждать до тех пор, пока не истечет 200мс (эксперимент с этим значением, это просто некоторое начальное значение), прежде чем он на самом деле вызывает изменение размера холста. Это помогает уменьшить нагрузку и обновление холста и быстрее справляется с событиями.

Надеюсь, это поможет.