setInterval и отображение объектов в массиве по временной шкале - PullRequest
Новая
       27

setInterval и отображение объектов в массиве по временной шкале

1 голос
/ 29 декабря 2011

Мне нужна помощь в создании эффективного JS-слушателя для массива объектов и видео.Это работает, но на самом деле неэффективно и требует много памяти, особенно если массив объектов большой.

У меня есть видео продолжительностью 1 минута, и я хочу отображать объекты, синхронизированные с этим видео, в графическом интерфейсена основе временных кодов.Например, в 0:23 я хочу отобразить комментарий.

Синхронизированные объекты с временным кодом хранятся в массиве, подобном следующему: 

comm1 = {text : "I like it", time : 23}
comm2 = {text : "I hate it", time : 48}
comm3 = {text : "I love it", time : 59}

var arr = [comm1, comm2, comm3]

Затем у меня есть проигрыватель Flash-видеокоторый возвращает текущую позицию воспроизведения видео.Я могу вызвать его через JavaScript следующим образом: 

var position = document.getElementById("player").currentTime();

Затем я создал объект setInterval, который проходит через массив каждые 250 мс для отображения комментария следующим образом: 

function getCurrentComment(){
    for(i=0;i<arr.length;i++){
        if(position >= arr[i].time){    
            getId("comments").innerHTML = arr[i].text;              
        }
    }
}

var commListener = setInterval("getCurrentComment()", 250);

Это работаетвизуально, но на самом деле он продолжает выполнять строку кода «getId (« comments »). innerHTML = arr [i] .text» каждые 250 мсек независимо от того, что.Есть ли лучший способ сделать это без необходимости непрерывного цикла через массив?Это становится действительно плохо, когда в массиве более 100 объектов.Я смотрел на шаблон наблюдателя, но не думаю, что он сработает для этого, поскольку я синхронизирую видео в реальном времени.

Ответы [ 2 ]

1 голос
/ 30 декабря 2011

Если вы можете прослушать событие поиска, вы можете сделать что-то вроде этого: 

var arr = [
        {text : "I like it", time : 23},
        {text : "I hate it", time : 48},
        {text : "I love it", time : 59}
    ],
    ceil = arr.length - 1,
    current = 0,
    el = getId("comments"),
    commListener;

function commListenerFunc()
{
    commListener = setInterval(function ()
    {
        if (arr[current].time == position)
        {
            el.innerHTML = arr[current].text;

            if ( current < ceil )
            {
                current++;
            }
            else
            {
                clearInterval( commListener );
            }
        }

    }, 250);
}

// Call this function on the seek event
function seekCallback()
{
    clearInterval( commListener );

    current = 0;

    for ( var i = 0; i < ceil; i++)
    {
        if ( arr[i + 1].time < position )
        {
            current++;
        }
        else
        {
            break;
        }
    }

    commListenerFunc();
}

commListenerFunc();

Обратите внимание: Я не отлаживал этот код, и у него могут быть некоторые проблемы. Я просто публикую это здесь, чтобы дать вам общее представление ...

0 голосов
/ 29 декабря 2011

Если вы сортируете arr и устанавливаете var nextComm = 0, вы можете просто проверить на arr[nextComm]. Если это отображается, увеличьте nextComm. Если есть поиск, найдите соответствующий nextComm, ища через arr для ближайшего будущего совпадения.

Кроме того, не устанавливайте innerHtml, когда вам не нужно.

...