Как избавиться от лишней нагрузки при изменении размера окна?

Question

[Илья Рябыкин]

Здравствуйте! Во время доработки адаптивности сайта заметил такую вещь, что при уменьшении размера окна браузера фиксируется двойное изменение.. поясню:
Если отслеживать onresize через консоль, то при уменьшении размера окна фиксируется двойное изменение, а при увеличении единичное.. в чем загвоздочка и почему так происходит? у всех ли так?

Вот код для теста (на фидле не работает):

var text = document.getElementById('text');
window.addEventListener("resize", function () {
	// document.write('был изменён размер окна<br/>');
	text.innerHTML += 'был изменён размер окна<br/>';
	console.log('test');
});

Где я попробовал отслеживать как через консоль, так и через innerHTML, так и через document.write.
Если убрать комментарий с d.w, то будет фиксироваться одно уменьшение, что за дрянь такая?

P.S. Тестировал в Chrome, уменьшал иконкой "Свернуть в окно", text - div;

Answer 1

[Родион Мещеряков]

Наблюдаю такое поведение в Хроме при уменьшении окна браузера, только если открыта консоль. Если консоль закрыта, то событие срабатывает только раз.

Можно использовать функцию дебаунсера:

function debouncer(func, timeout) {
  var timeout = timeout || 200;
  var timeoutID;
  
  return function () {
    var self = this;
    
    clearTimeout(timeoutID);
    
    timeoutID = setTimeout(function() {
      func.apply(self, Array.prototype.slice.call(arguments));
    }, timeout);
  }
}

var text = document.getElementById('text');

window.addEventListener("resize", debouncer(function(e) {
  text.innerHTML += 'был изменён размер окна<br/>';
  console.log('test');
}));

Comments

[Илья Рябыкин]

крутое изобретение, спасибо за просветление :)