Объединить 2 функции jQuery

Question

У меня есть 2 функции jQuery, которые в основном написаны одинаково, за исключением их 1-ых строк:

$(document).ready(function() {
 var h = $(window).height();
 var w = $(window).width();
 $('#foo').css({'height' : h});
 $('#foo').css({'width' : w});
});

$(window).resize(function() {
 var h = $(window).height();
 var w = $(window).width();
 $('#foo').css({'height' : h});
 $('#foo').css({'width' : w});
});

, поэтому мне было интересно, возможно ли объединить их в 1 как-нибудь?

Как всегда, спасибо заранее.

Answer 1

Вы можете вызвать событие resize вручную:

$(function() { // shortcut for $(document).ready(function() {...});
    $(window).resize(function() {   // bind the handler
        $('#foo').css({
            'height': $(window).height(),
            'width': $(window).width()
        });
    }).resize(); // trigger the resize event
});

или создать дополнительную функцию и связать ее с обоими событиями:

function resizeHandler() {
    $('#foo').css({
        'height': $(window).height(),
        'width': $(window).width()
    });
}

$(document).ready(resizeHandler);
$(window).resize(resizeHandler);

---

Кстати.$(function(){...}); является ярлыком для $(document).ready(function(){...});.

Answer 2

Вы также можете использовать do:

$(window).bind('load resize', function(e){
    $('#foo').css({'width' : $(window).width(), 'height': $(window).height()});
});

Answer 3

создать третью функцию

function calculateSomething(){
  var h = $(window).height();
  var w = $(window).width();
  $('#foo').css({'height' : h, 'width' : w}});
}

Затем вызвать функцию

$(document).ready(calculateSomething);

$(window).resize(calculateSomething);

Answer 4

Как это:

function yourfunc() {
 var h = $(window).height();
 var w = $(window).width();
 $('#foo').css({'height' : h});
 $('#foo').css({'width' : w});
}

$(document).ready(yourfunc);
$(window).resize(yourfunc);

Другой способ назвать его (более длинный, но более понятный):

$(document).ready(function(){
   yourfunc();
});
$(window).resize(function(){
   yourfunc();
});

Обе работы. Надеюсь это поможет. Приветствия

Answer 5

var myFunction = function() {
 var h = $(window).height();
 var w = $(window).width();
 $('#foo').css({'height' : h});
 $('#foo').css({'width' : w});
}

$(document).ready(myFunction);
$(window).resize(myFunction);