Использовать функцию при изменении поля объекта (цикл)

Question

В моем изображении карусель, главное, что изменяется, является значением margin-left. Из знания этого значения я хотел попытаться интерпретировать номер слайда (например, «Изображение 3 из 4»). я получил число всех горок:

var all_slides_width = $('#gallery_wrapper').outerWidth(); 
var slide_width = $('.image_content').outerWidth(); 
var slide_quantity = all_slides_width/slide_width; 

Тогда я хотел бы получить номер текущего видимого изображения с:

var margin_left = parseInt($('#gallery_wrapper').css('margin-left')); 
var slide_count = parseInt(-margin_left + slide_width)/slide_width; 

и отображение его:

<span class="slide_number"></span> 
<script> 
    $('.slide_number').text('Image ' + slide_count + " of " + slide_quantity); 
</script> 

Проблема в том, что margin-left изменяется с каждым новым слайдом. Поэтому мне нужен цикл, который меняет slide_count при каждом изменении margin-left. Как я могу это достичь? A setTimeout каждой секунды был явно неэффективен. Вот сценарий моего текущего состояния: http://jsfiddle.net/cqgnvsce/

Answer 1

Я только что удалил таймаут и самозанятость из файла slide_number(). Это то, что вы пытались сделать? http://jsfiddle.net/76zfn6ga/ Вы уже вызываете slide_count, когда вы вызываете slide(), поэтому я не вижу необходимости в цикле. На самом деле, почему вы не вызываете slide_number() из слайда()?

var slide_number = function() { 
    var margin_left = parseInt($('#gallery_wrapper').css('margin-left')); 
    var slide_count = parseInt(-margin_left + slide_width)/slide_width; 
    $('.slide_number').text('Image ' + slide_count + " of " + slide_quantity); 
};