Javascript：调整对每个事件触发两次的事件大小 [英] Javascript: Resize event being fired twice on each event

问题描述

我在JS中有一个Graphics对象，我使用它作为canvas元素的容器。

图形对象只需要一个画布并设置其宽度，高度等。

调整resize事件的函数：

  Graphics.prototype.resize = function（）{
 
 this.canvas.width =（this.canvas.width> window.innerWidth）
？ window.innerWidth：someDefaultVar; 
 
 //同样的宽度... 
 
 alert（this.canvas.width）; //用于测试目的的警报
}; 
  

假设canvas.width< window.innerWidth和window.innerWidth = 205这是每个调整大小的警报输出：

205

宽度

我很困惑，为什么它被调用两次，从而导致画布不调整大小。

在我的动画循环中，我使用的对象如下：

  window.addEventListener（load，Main，false）; //从注释响应中添加，
 // load eventlistener 
 
 function Main（）{
 var canvas = new Graphics（width，height ..）; //包含画布的对象
 
 window.addEventListener（resize，OnResize，false）; //添加事件监听器
 //用于resize 
 
函数OnResize（）{
 
 canvas.resize（）; //调用上面命名的函数
} 
 
 function AnimLoop（）{
 
 canvas.draw（）; 
 requestAnimationFrame（AnimLoop）; 
} 
 
 AnimLoop（）; //调用AnimLoop进入开始动画
} 
  

p>

提前感谢

解决方案

resize事件可以抛出几次各种原因。你可以做的是实现一个计时器，以便只有当事件没有一个一个被引发时触发调整大小。

例如：

  function Main（）{
 var canvas = new Graphics（width，height ..）; 
 
 ///在main中添加一个var来保存计时器请求id 
 var resizeTimer; 
 
 window.addEventListener（resize，OnResize，false）; 
 
函数OnResize（）{
 
 ///每次触发调整大小时重置超时
 ///无需检查值
 clearTimeout resizeTimer）; 
 
 ///设置定时器，以便当事件之间的延迟
 ///高于200 ms调用resize canvas .. 
 resizeTimer = setTimout（canvas.resize，200 ）; 
} 
 
 ... 
} 
  

这里发生的是当调整大小的事件触发回调，它将等待，直到有200毫秒（实验这个值，这只是一些初始值），然后才真正调用画布调整大小。这有助于减少画布的载入和更新，并更快地处理事件。

希望这有助于。

I have a "Graphics" object in JS that i'm using as a container for the canvas element.

The graphics objects just takes in a canvas and sets it's width, height, etc.

I have this function being called on the resize event:

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

Assuming the canvas.width < window.innerWidth and window.innerWidth = 205 this is the alert output for each resize:

205

Original Width

I'm puzzled as to why it's being called twice, thus resulting in the canvas not resizing.

In my animation loop I'm using the object as so:

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
}

Can anyone spot the problem?

Thanks in advance

解决方案

The resize event can be thrown several times for various reasons. What you can do is to implement a timer so that your resize is triggered only when the events aren't thrown in a bunch.

For example:

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

   ...    
}

What happens here is when resize events are triggering the callback it will wait until there has elapsed 200ms (experiment with this value, this is just some initial value) before it actually calls the canvas resize. This helps reduce the load and update of canvas and handles the events faster.

Hope this helps.

这篇关于Javascript：调整对每个事件触发两次的事件大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！