Question

此项目的快速背景：在运行Chrome网络浏览器的自助服务终端机上播放4个视频列表。允许用户选择要播放的视频，然后继续循环浏览列表，允许用户选择要随意播放的视频。

所以，我已经编写了所有JavaScript来启动这个过程，并且我发现我写入事物的方式的递归本质可能是一个糟糕的方式......即使它似乎是最好的这样做的逻辑方式。

这个东西是否会在某个时刻溢出堆栈并且如果我长时间离开它会抛出错误？基本的想法是它应该自己循环，直到一些用户干预。

这是我用于播放视频的JavaScript代码（在我的html中，我有四个按钮，设置为使用相应的视频编号调用该功能）：

function playVideo(video_number) {

    //remove all previous event listeners for the video element node
    var el = document.getElementById('video'),
        elClone = el.cloneNode(true);
    el.parentNode.replaceChild(elClone, el);

    //define the array that has information about our videos.
    //array defines the following:
    //[0]=path to video, [1]=video title, [2]=color code for visual, 
    //[3]=next video to play in list
    var video_array = [
        ['./video1.mp4', 'VIDEO 1 TITLE', 'red', 1], //
        ['./video2.mp4', 'VIDEO 2 TITLE', 'green', 2], //
        ['./video3.mp4', 'VIDEO 3 TITLE', 'blue', 3], //
        ['./video4.mp4', 'VIDEO 4 TITLE', 'orange',  0], //
    ];

    //get all the elements we're going to be using
    var t = document.getElementById('title');
    var v = document.getElementById('video');
    var s = document.getElementById('source');
    var p = document.getElementById('progress');            

    t.innerHTML = video_array[video_number][1]; //set the title of the video
    t.style.color = video_array[video_number][2];

    p.className = 'progress-bar ' + 'btn' + (video_number + 1);

    v.src = video_array[video_number][0];
    v.load();
    v.play();

    //add event listener for the progress bar update
    v.addEventListener('timeupdate', function() {
        p.style.width = ( (v.currentTime / v.duration) * 100 ).toFixed(4) + '%';
    }, false);

    //do some stuff when the video ends
    v.addEventListener('ended', function() {

        //remove the listener for the progress bar
        v.removeEventListener('timeupdate', function() { 
            console.log('removed the progress bar listener')
        }, false);

        console.log('video ' + video_number + ' ended');

        //play the next video in the list ...
        playVideo(video_array[video_number][3]);

    }, false);

} //end function playVideo()

这个递归是否会炸毁我的浏览器？

0 个答案: