How to execute the functions in the loop only once?

Question

I created this fiddle to show it: http://jsfiddle.net/vw425/3/

The script does what it should do except that it fires the $('.bx-pager-link').eq(current_index).click() and the mark_current() functions way to often. You can see that if you have opened your firebug console. So it works but it's still a lousy script and I want to improve it. So how to parse through the json object and compare the timecodes without firing those functions all the time? Any tips maybe?

Here is the code: HTML:

<div id="wrapper">
<div id="pdf_presentation">
                <div id="slider">
                    <ul class="bxslider">
                                <li class="12302"><img src="http://www.projectorcentral.com/images/articles/4-3%20Bristlecone%20Pines.jpg" alt="page 0" /></li>
        <li class="12302"><img src="http://img3.wikia.nocookie.net/__cb20060423235201/tovid/images/0/00/4_3_grid.jpg" alt="page 1" /></li>
        <li class="12302"><img src="http://www.freecomputerdesktopwallpaper.com/new_wallpaper/5_4_3_2_1_Happy_New_Year_freecomputerdesktopwallpaper_p.jpg" alt="page 2" /></li>
        <li class="12302"><img src="http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/image/tests/images/imageHoriz.jpg" alt="page 3" /></li>
        <li class="12302"><img src="http://4.bp.blogspot.com/-cVEz-BBU5Mw/U8uLaEKhdCI/AAAAAAAAJxQ/ZG06K9VPj9A/s1600/P1130206.JPG" alt="page 4" /></li>


                    </ul>
                <div id="custom_pager">
                    <ul id="custom_pager_list">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>

                    </ul>
                </div>
                </div>

            </div>
            <div id="video_wrapper">
                <video preload="none" id="movie" controls>
                    <source id="mp4" type="video/mp4" src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
                    <source id="webm" type="video/ogg" src="http://www.w3schools.com/html/mov_bbb.ogg"></source>
                </video>
            </div>
</div>

CSS:

*{
    padding: 0;
    margin: 0;
}

body{
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 12px;
}

#wrapper{
    width: 980px;                
    margin: 0 auto;
    margin-top: 20px;
    box-shadow: 0 0 10px #ccc;
}

#slider{
    width: 400px;
    height: 300px;
    float: left;
    margin-left: 10px;
}

#video_wrapper{
    float: right;
    margin-right: 10px;

}

#video_wrapper video{
    width: 540px;
    height: 308px;
}

.bx-pager{
    display: none;
}

#custom_pager{
    float: left;
    width: 400px;                
}

#custom_pager li{
    float: left;
    list-style-type: none;
    cursor: pointer;
    padding: 0 3px;
}

#custom_pager li:hover {
    font-weight: bold;
}

.bx-wrapper{
    margin-bottom: 0 !important;
}

.current_slide{
    font-weight: bold;
}

Javascript/jQuery:

var timecodes=[{"start":"00:00:00:00","end":"00:00:03:12"},{"start":"00:00:03:12","end":"00:00:04:00"},{"start":"00:00:04:00","end":"00:00:06:00"},{"start":"00:00:06:00","end":"00:00:09:55"},{"start":"00:00:09:55","end":"00:00:11:00"}];


$('#custom_pager_list li').eq(0).addClass('current_slide');

$('.bxslider').bxSlider({
    mode: 'fade',
    infiniteLoop: false,
    hideControlOnEnd: true,
    keyboardEnabled: true,
    useCSS: false,
    controls: false
});
$("#movie").on("timeupdate", function (event) {                    
    var current_index;
    for (var i = 0; i < timecodes.length; i++) {
        var start_as_array = timecodes[i].start.split(':');
        var end_as_array = timecodes[i].end.split(':');
        var start_in_seconds = (parseInt(start_as_array[0]) * 3600 + parseInt(start_as_array[1]) * 60 + parseInt(start_as_array[2])) + "." + start_as_array[3];
        var end_in_seconds = (parseInt(end_as_array[0]) * 3600 + parseInt(end_as_array[1]) * 60 + parseInt(end_as_array[2])) + "." + end_as_array[3];
        if (this.currentTime > start_in_seconds && this.currentTime < end_in_seconds) {

            current_index = i;                          
        }
    }
    $('.bx-pager-link').eq(current_index).click();
    mark_current();
});

$('#custom_pager_list li').click(function () {
    if ($('#movie').get(0).paused) {
        $("#movie").get(0).play();                        
    }
    else {
        var slide = $(this).index();
        var start_as_array = timecodes[slide].start.split(':');
        var start_in_seconds = (parseInt(start_as_array[0]) * 3600 + parseInt(start_as_array[1]) * 60 + parseInt(start_as_array[2])) + "." + start_as_array[3];
        $("#movie").get(0).currentTime = start_in_seconds;
        $("#movie").get(0).play();
    }
});

function mark_current() {
    var active_index = $('.active').parent().index();
    console.log(active_index);
    $('.current_slide').removeClass('current_slide');                    
    $('#custom_pager_list li').eq(active_index).addClass('current_slide');
}

score 1 · Accepted Answer · answered Jul 30 '14 at 07:36

Here I have added a done property to the JSON objects and added a check for that in the conditional. Also moved the click and mark_current function calls within the conditional.

Demo:http://jsfiddle.net/robschmuecker/vw425/4/

var timecodes = [{
    "start": "00:00:00:00",
        "end": "00:00:03:12",
        "done": false
}, {
    "start": "00:00:03:12",
        "end": "00:00:04:00",
        "done": false
}, {
    "start": "00:00:04:00",
        "end": "00:00:06:00",
        "done": false
}, {
    "start": "00:00:06:00",
        "end": "00:00:09:55",
        "done": false
}, {
    "start": "00:00:09:55",
        "end": "00:00:11:00",
        "done": false
}];


$('#custom_pager_list li').eq(0).addClass('current_slide');

$('.bxslider').bxSlider({
    mode: 'fade',
    infiniteLoop: false,
    hideControlOnEnd: true,
    keyboardEnabled: true,
    useCSS: false,
    controls: false
});
$("#movie").on("timeupdate", function (event) {
    var current_index;
    for (var i = 0; i < timecodes.length; i++) {
        var start_as_array = timecodes[i].start.split(':');
        var end_as_array = timecodes[i].end.split(':');
        var start_in_seconds = (parseInt(start_as_array[0]) * 3600 + parseInt(start_as_array[1]) * 60 + parseInt(start_as_array[2])) + "." + start_as_array[3];
        var end_in_seconds = (parseInt(end_as_array[0]) * 3600 + parseInt(end_as_array[1]) * 60 + parseInt(end_as_array[2])) + "." + end_as_array[3];
        if (this.currentTime > start_in_seconds && this.currentTime < end_in_seconds && timecodes[i].done != true) {
            timecodes[i].done = true;
            current_index = i;

            $('.bx-pager-link').eq(current_index).click();
            mark_current();
        }
    }
});

$('#custom_pager_list li').click(function () {
    if ($('#movie').get(0).paused) {
        $("#movie").get(0).play();
    } else {
        var slide = $(this).index();
        var start_as_array = timecodes[slide].start.split(':');
        var start_in_seconds = (parseInt(start_as_array[0]) * 3600 + parseInt(start_as_array[1]) * 60 + parseInt(start_as_array[2])) + "." + start_as_array[3];
        $("#movie").get(0).currentTime = start_in_seconds;
        $("#movie").get(0).play();
    }
});

function mark_current() {
    var active_index = $('.active').parent().index();
    console.log(active_index);
    $('.current_slide').removeClass('current_slide');
    $('#custom_pager_list li').eq(active_index).addClass('current_slide');
}

Brilliant! That's it! I tried to add a check variable but it didn't work because you have to add it for all timecode properties. Good idea to manipulate the json object! Thx a lot! :) — user2718671, Jul 30 '14 at 07:49
Alright I figured out, that if you want to click more then one time at the pager navigation items the function won't work a second time because the "done" value of timecodes object item is set to true. So I added a timeout function that sets the value to false again after the time between start and end has passed. Updated fiddle is here: http://jsfiddle.net/vw425/5/ If the amount of time is higher than in this example and you click before the time has passed the error still will occur but that's another story :D — user2718671, Jul 30 '14 at 11:24

How to execute the functions in the loop only once?

1 Answers1