Как правильно вызывать функции по ресайзу Javascript?

Question

[unStaiL]

Доброго времени суток. Не так давно в JS на работе использую jQuery. В общем интересует такой вопрос. Как правильно реализовать динамическое изменение размера блоков.

Допустим есть такой код на всем знакомом фреймворке.

foo();
$(window).resize(function(event) {
    foo();
}

Открыл человек сайт на мобильном девайсе. Некий элемент подстроился под него функцией foo();
Так вот при простом вызове foo(); она единожды применяет свои действия и все.
В коде, приведенном, выше - оно дублируется.
Если внутри foo(); описывать ресайз, то дублируется код внутри функции. Посему вариант, который я привел выше пока более приемлим. Но таких функций бывает и 15++ (не спрашивайте почему).

Мне бы хотелось узнать как выполнять код при загрузке странице и по ее ресайзу, без дублирования.
P/S
Раз пришлось расставлять костыли через setInterval(); Тоже вариант. Но не подходит, я думаю. Нужно мнение более опытного человека.

Будет ли нормальным вариант когда функция в аргумент принимает функцию и выполняет ее внутри себя два раза в разных блоках ? :)

Comments

[unStaiL]

Я в конце, подумал об єтом пока писал вопрос. Возможно пример организации кода могли бы привести?

Answer 1

[Денис Инешин]

Что мешает вызов всех функций перенести внутрь foo?

function foo () {
    bar();
    baz();
}

$(window).resize(function(event) {
    foo();
}
foo();

Answer 2

[Nikolay Talanov]

Не до конца понял что конкретно требуется, но обычно все делаю так:
1) Создается функция, внутри которой лежит логика ресайза, и эта функция оборачивается в debounce функцию

// обычно беру debounce функцию отсюда http://davidwalsh.name/javascript-debounce-function
// ибо подключать ради неё какой-нибудь underscore/lodash это overkill
function debounce(func, wait, immediate) {
	var timeout;
	return function() {
		var context = this, args = arguments;
		var later = function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		};
		var callNow = immediate && !timeout;
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
		if (callNow) func.apply(context, args);
	};
};

var resizeFn = debounce(function() { /* your logic */ }, 100); // 100 это собственно таймер дебаунса, то есть функция будет срабатывать только тогда, когда после последнего её вызова прошло минимум 100ms
// прикрепляем функцию к обработчику события
$(window).on("resize", resizeFn);

2) Ну и так как вам необходимо все это дело триггернуть на загрузке страницы, то просто пишите resizeFn();и все.
Это то что вам необходимо?