基本JS - この機能は大丈夫ですか？

Question

私は、垂直に中央のコントロールを持つカルーセル（Owl Carousel）を持っています。構造のために、私は絶対に前と次の矢印を配置する必要があります。ページは応答性が高いため、その位置は動的です。コントロールのサイズも変更されることがあります。

私は負荷とリサイズ上で動作する機能を書いています。画像の高さとコントロールの高さを取得し、コントロールの高さを取得し、前者から後者を減算し、2で割って、その数をコントロールのマージン・トップとして使用します。

すべての変数を正しく取得して使用しているかどうかは疑問です。 JavaScriptは順番に読み込まれますか？それは最初の行を実行し、次に次の行を実行し、次に次の行を実行するところです...私はCSSでは強いですが、JSはいつも松葉杖です。

これをより効率的に書くことはできますか？

function centerCarouselControls() { 
 
    var carouselImage = $('.carousel-card > img'); 
 
    var carouselControls = $('.owl-nav > div'); 
 
    var carouselHeight = carouselImage.outerHeight(); 
 
    var controlHeight = carouselControls.outerHeight(); 
 
    var controlMargin = (carouselHeight - controlHeight)/2; 
 
    carouselControls.css('margin-top', controlMargin); 
 
} 
 

 
$('.carousel-card > img').load(centerCarouselControls); 
 
$(window).on('resize', centerCarouselControls);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

私はこのように感じる十分特定されていないため、ここにフラグが付けられます質問の種類かもしれません。それが事実なら、誰かが私にこれがより適切なコミュニティを指摘してくれるだろうか？ありがとう！

Answer 1

一部のブラウザでは、あなたのコードは、Firefox 51のように動作しますが、それはこのより完全なコードです：コード動作するので

carouselControls.css('margin-top', controlMargin + 'px');