equalHeight調整響應的大小

Question

我有一個代碼equalHeight。將柱子設置爲相同的高度。但我用窗口調整大小。該腳本僅適用於臺式機和平板電腦，不適用於移動設備。我有這個劇本。這個腳本正在工作，但我怎樣才能使這個腳本更好？因爲我現在使用了兩次相同的功能。

我該如何做得更好？

var viewportWidth = $(window).width(); 
if ((viewportWidth >= 760)) { 
    setTimeout(function() { 
     equalHeight($('#footer .column')); 
    }, 250); 
}; 
$(window).resize(function() { 
    var viewportWidth = $(window).width(); 
    if ((viewportWidth >= 760)) { 
     setTimeout(function() { 
      equalHeight($('#footer .column')); 
     }, 250); 
    }; 
}); 

Answer 1

您可以自定義一個函數並調用它，只要你需要：

function changeWidth() { 
    var viewportWidth = $(window).width(); 
    if ((viewportWidth >= 760)) { 
     setTimeout(function() { 
      equalHeight($('#footer .column')); 
     }, 250); 
    }; 
} 

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

Answer 2

您可以通過觸發resize事件這樣避免重複：

$(window).resize(function() { 
    var viewportWidth = $(window).width(); 
    if ((viewportWidth >= 760)) { 
     setTimeout(function() { 
      equalHeight($('#footer .column')); 
     }, 250); 
    }; 
}) 
.trigger('resize'); 

Answer 3

嘗試這種方式

$(document).ready(function() { 
    resizeFunction(); 

    $(window).resize(function() { 
     resizeFunction(); 
    }); 
}); 

var resizeFunction = new function() { 
    var viewportWidth = $(window).width(); 
    if ((viewportWidth >= 760)) { 
     setTimeout(function() { 
      equalHeight($('#footer .column')); 
     }, 250); 
    }; 
}