window.onresize fires

Question

Я новичок в js. Пожалуйста, не мучайтесь больно. У меня есть этот код

window.onresize=function() {alert(1);}; 

При изменении размера любого окна browser`s, эта функция срабатывает дважды. Зачем? И как переписать этот код, код которого будет срабатывать один раз.

Thanx заранее.

Answer 1

Вам нужно время ожидания для объединения событий изменения размера.

var res; 
window.onresize=function() { 
    if (res){clearTimeout(res)}; 
    res = setTimeout(function(){console.log("resize triggered");},100); 
}; 

live Example

Answer 2

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

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

например.

var resizeTimer; 
window.onresize = function(){ 
    if (resizeTimer){ 
     clearTimeout(resizeTimer); 
    } 
    resizeTimer = setTimeout(function(){ 
     alert(1); 
     }, 500); 
}; 

Просмотреть результаты работы this fiddle.

Answer 3

Чтобы предотвратить функцию от «стрельбы» тот же результат более чем один раз, когда пользователь изменять

var doc = document; //To access the dom only once 
var cWidth = doc.body.clientWidth; 
var newWidth = cWidth; //If you want a log to show at startup, change to: newWidth = 0 
window.onresize = function(){ 
    newWidth = doc.body.clientWidth; 
    if(cWidth != newWidth){ 
     cWidth = newWidth; 
     console.log("clientWidth:", cWidth); //instead of alert(cWidth); 
    }; 
}; 

Answer 4

Я предлагаю другое решение, потому что я не люблю таймауты,

`var resized; 
    window.onresize = function() { 
     if(resized){ 
      resized = false; 
     } 
     else{ 
      resized = true; 
      alert('resize'); 
     } 
    };`