js實現輪詢展示

公司svcp的項目，如下界面：實現效果是點擊第一組下面的攝像機，右側自動對這一組的數據進行輪詢顯示。

要點：輪詢顯示的邏輯，對不同個數的攝像機進行輪詢，    2）按esc鍵的兼容寫法，兼容火狐與谷歌

 

 

 

 var setId;
    function lxVideoCliick(treeId, treeNode, clickFlag) {
       
        clearInterval(setId);

        var pNode = treeNode.getParentNode();
        var childrenNodes = pNode.children;
        var i = 0; //for循環的第一個值
        var newi = -1; //判斷是第幾個視頻窗口。因為它首先要++一下，所有默認為-1
        var index = 0; //for循環的第二個值，每次+4
        var lengthV = childrenNodes.length;
        //打開監控視頻
        $(document).navtab('closeTab', 'idsvcp')
        $("#svcpmain").navtab({
            id: 'svcp_lx', url: '/SvcpPosa/Index', title: '視頻監控-輪循', external: false, onLoad: function () {
                $.get("/Js/np_pva/index1.js", function () {
                    $.get("/Js/np_pva/posa.js", function () {
                        $.get("/Js/np_pva/basefunction.js", function () {
                            win_load_main();
                            SetLayout(4);
                            $("#btn_win_nine").hide();
                            $("#btn_win_one").hide();
                            $(".fullScreen").show();
                            //當一組攝像機的個數小於等於四個的時候，不進行輪詢
                            if (childrenNodes.length <= 4) {
                                for (var k = 0; k < childrenNodes.length; k++) {
                                    videoParames(childrenNodes[k], k, 4);
                                    console.log(childrenNodes[k].name);
                                }
                            } else {
                                //預先顯示四個，然后在開始輪詢
                                for (var k = 0; k < childrenNodes.length; k++) {
                                    videoParames(childrenNodes[k], k, 4);
                                    console.log(childrenNodes[k].name);
                                    if (k == 3) {
                                        i = 4;
                                        index = 8;//以防第一遍延時2倍時間
                                        break;
                                    }
                                }
                              
                               lunxun()
                              
                                //每一秒鍾判斷一次用戶是否點擊進入全屏模式。當進入全屏模式后則清除輪詢模式
                                setInterval(function () {
                                    var ret = IsFullScreen();
                                    if (ret) {
                                        console.log("進入全屏");
                                        clearInterval(setId);
                                    }
                                }, 1000)
                                //當進入全屏模式后，按ESC鍵退出全屏模式變成四分屏，然后繼續開始輪詢。
                                $(window).keyup(function (e) {
                                    var keyCode = window.event ? e.keyCode : e.which;
                                    if (keyCode == 27) {
                                        console.log("退出全屏");
                                        btn_win_four_click();
                                        lunxun();
                                    }
                                })
                                //輪詢方法，每10s進行一次輪詢，
                                //進行for循環遍歷這組的攝像機，每次遍歷4個，index每次+4
                                function lunxun() {
                                    setId = setInterval(function () {
                                        for (; i <index; i++) {
                                            
                                            if (childrenNodes[i] == undefined) {
                                                var yushu = i % 4;//表示最后攝像機的余數
                                                if (newi > 3) {
                                                    newi = 0;
                                                }
                                                //如果沒有攝像機，則把對應地區的視頻流清空，顯示空的內容。
                                                if (yushu  == 1) {
                                                    StopStream(newi+1); StopStream(newi +2); StopStream(newi + 3);
                                                } else if (yushu == 2) {
                                                    StopStream(newi + 1);
                                                    StopStream(newi + 2);
                                                } else if (yushu == 3) {
                                                    StopStream(newi + 1);
                                                }
                                              
                                                console.log("無攝像機");
                                                //設置到初始值
                                                i = 0;
                                                index = 0;
                                                newi = -1;
                                                break;
                                            } else {
                                                newi++;
                                                if (newi > 3) {
                                                    newi = 0;
                                                }
                                                videoParames(childrenNodes[i], newi, 4);
                                                console.log(childrenNodes[i].name);
                                            }
                                         
                                        };
                                       
                                        if (index < childrenNodes.length) {
                                            index += 4;
                                        }
                                        //當攝像機的個數是4的整數倍時，輪詢到最后一個后重新設置初始值。
                                        if (i == index) {
                                             i = 0;
                                             newi = -1;
                                             index = 4;  //設置為4,這樣不會延時一次。
                                        }
                                    
                                        //console.log("i 的值為："+i)
                                    }, parseInt(pNode.PlaySeconds) * 200);
                                }
                            }

                        });
                    });
                });
            }
        }); 
    }