Как я могу отменить выполнение JavaScript?

Question

Я новичок в JavaScript и потянув меня за волосы над этим ...

Демонстрационный проблемы здесь: http://codepen.io/sol_b/pen/PzgdWy

И это сценарий:

var sections = function() { 
    $('.image').each(function() { 
    var $this = $(this), 
     x = $this.find('img').width() 
    $this.width(x); 
    }); 
}; 

$(document).ready(function() { 
    sections(); 
}); 

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

Ширина изображения вычисляется и присваивается контейнеру изображения. Идея состоит в том, что ряд изображений всегда будет поддерживать их соотношение сторон, без пробелов между контейнерами.

Проблема заключается в том, что код не срабатывает около 50% времени, а изображения просто хлюпают вместе. Изменение размера окна исправляет его, поэтому я думаю, что это как-то связано с последовательностью загрузки.

Я пробовал использовать window.onload и img.onload вместо document.ready, и это не решило его. Я что-то пропустил в своем сценарии?

Answer 1

Используйте вместо этого:

$(window).on('load resize', sections); 

Answer 2

Я считаю, что вы ищете функцию timeout().

Если мое понимание верное, вы можете позвонить window.timeout([function to call], [time in ms], и функция для вызова будет выполнена, что много мс ПОСЛЕ выполнения кода. Он не будет ждать, как sleep().

Answer 3

setTimeout(
    function(){ 
     console.log("this line will be logged with 1000ms delay"); 
    },1000 
) 

W3C documentation

Answer 4

Используйте load на изображение и рассчитывать, пока все будут загружены, а затем выполнить вашу функцию.

var images $('.image'); 
var amount = images.length; 

images.on('load', function() { 
    if(--amount == 0) { 
     sections(); 
    } 
}); 

Чтобы предотвратить кэшированные изображения, которые будут выполняться от слушателя, вы можете запустить их вручную (даже на window.load). Эти линии будут срабатывать событие для кэшированных элементов:

images.each(function() { 
    $(this).complete && $(this).trigger('load'); 
}); 

Answer 5

Попробуйте использовать 'под нагрузкой' обработчик событий вместо $ (документ) .ready:

$(window).on('load', function() { 
    sections(); 
}); 

вместо:

$(document).ready(function() { 
    sections(); 
}); 

Или вы можете использовать:

$(window).on('load resize', function() { 
    sections(); 
}); 

Чтобы обрабатывать оба события :)