优化div +屏幕大小调整JS块

由于目标不是很明确，因此我只能进行一些小的代码编辑，以使其更易于阅读，并且可能会提高一些性能。

jQuery(document).ready(function($) {
  // Define share variables.
  var element = $('.hs-caption');
  var elementWidth, elementHeight;
  var screenWidth, screenHeigth;
  var upcomingHeader = $('.fold-header').height() * 2.0;
  var heightOffset;
  var totalHeight;
  var HEIGHT_RATIO = 1.25;
  var paddingElements = $('.hs-info .btn-slide');
  var displayElements = $('.hs-info p, .hs-sponsor');
  var RESIZE_DELEY = 200;
  var delayedHandler = null;

  function onResize() {
    updateSetting();
    setToCenterOfParent(element, $(document.body), true, false);
    fullscreen();
    scalar();
  };

  function scalar() {
    var innerHeight = window.innerHeight;
    var totalElementHeight = totalHeight * HEIGHT_RATIO + upcomingHeader;
    var isScreenSmaller = (innerHeight < totalElementHeight);
    var padding = isScreenSmaller ? '10px 0px 0px 0px' : '0px';
    var display = isScreenSmaller ? 'none' : 'block';
    paddingElements.css('padding', padding);
    displayElements.css('display', display);
  }

  function updateSetting(){
    screenWidth = $(window).width();
    screenWidth = $(window).height();
    elementWidth = element.width();
    elementHeight = element.height();
    heightOffset = (screenHeight > 960) ? 220 : 200;
    totalHeight = elementHeight + heightOffset;
  }

  function fullscreen() {
    $('#hero').css({
      width: screenWidth,
      height: screenHeigth
    });
  }

  function setToCenterOfParent(element, parent, ignoreWidth, ignoreHeight) {
    var parentWidth = parent.width();
    var parentHeight = parent.width();
    if (!ignoreWidth) {
      element.css('left', parentWidth/2 - elementWidth/2);
    }
    if (!ignoreHeight) {
      element.css('top', heightOffset);
    }
  }

  // Init
  onResize();

  $(window).resize(function() {
    // Don't do this too often
    if (delayedHandler !== null) {
      clearTimeout(delayedHandler);
    }
    // Delayed the function to be executed, so it only updates when user stop
    // resizing for a fixed amount of time.
    delayedHandler = setTimeout(onResize, RESIZE_DELEY);
  });

  console.log("height:", elementHeight);
  console.log("total height:", elementHeight + heightOffset);
  console.log("screenHeight:", screenHeight);
  console.log("heightOffset:", heightOffset);
  console.log("upcomingHeader:", upcomingHeader);
});

这个想法是：

1. 拔出将要反复查询的所有元素，例如$('.hs-info .btn-slide')和$('.hs-info p, .hs-sponsor')，$('.hs-caption')似乎也被广泛使用，将其拔出。
2. 对变量做同样的事情，在这里我不确定您是否会使用setToCenterOfParent其他元素，但是我将尝试输入jquery包装的元素，因此我可以在函数中直接对它们使用jquery。
3. elementWidth/elementHeight 尚不清楚它是否会更改，因此我保留未编辑的代码。
4. 添加asettimeout来调整大小，因此jquery在用户调整窗口大小期间不会进行大量计算，并且0.2 sec的延迟应该足够快，以使用户不会感到延迟（或者您可以将RESIZE_DELEY调整为更小的数字）。
5. 除非你使用一些库与jQuery将发生冲突，保持代码风格相同的是最好的，所以我所有的改变jQuery(foo).bar，以$(foo).bar保持一致性。

我相信，如果没有类似jsfiddle的示例来演示此代码的用途，这应该是我们能做的最多的事情。