在做socket有关的H5时，遇到同时投票排名页会出现混乱的情况

setTimeout(function () {
                    $('.ResultListDiv > ul').empty()
                    JSON.parse(dataJson.data).map(function (value, index) {
                        console.log(value, index)
                        if(index === 0){
                            $('.ResultListDiv > ul').append(
                                '<li style="border-bottom: 0;">' +
                                '   <div class="ResultListHeadDiv2">' +
                                '       <div class="ResultListHead2">' +
                                '           <img src="' + value.avatarurl + '" class="ResultListPersonalHead2">' +
                                '       </div>' +
                                '       <div class="ResultPersonalNameDiv">( ' + value.count + '票 )</div>' +
                                '       <div class="ResultNum2">买单的就是“<span>' + value.nickname + '</span>”了</div>' +
                                '   </div>' +
                                '</li>'
                            )
                        } else {
                            $('.ResultListDiv > ul').append(
                                '<li>' +
                                '   <div class="ResultNumDiv">' + (index + 1) + '</div>' +
                                '       <div class="ResultListHeadDiv">' +
                                '<!-- <img src="__IMG__/HeadPortraitBG1.png" class="ResultListHeadImgBorder"> -->' +
                                '           <img src="' + value.avatarurl + '" class="ResultListHeadImg">' +
                                '       </div>' +
                                '       <div class="ResultListNameDiv">' + value.nickname + '</div>' +
                                '   <div class="ResultListNumOfVotesDiv">' + value.count + '票</div>' +
                                '</li>'
                            )
                        }

                    })
                }, 500)

如果此时A与B同时投票，投票后返回的两条socket几乎同时到达，由于这时候页面还没有任何内容，所以empty()方法没有任何作用，但是两个内容又都可以渲染，这就造成页面出现重复渲染的bug

解决方法：

使用JS的数组和push()以及unshift()方法来模拟队列，达成先进先出，这样拿到socket的时候只负责将数据push进数组，然后设置计时器，每隔一秒从数组中取出第一个值来进行渲染，就可以解决这个问题了。

setInterval(function () {
            if(voteQueue.length === 0){
                return false
            } else {
                var listEle = voteQueue.shift()
                $('.ResultListDiv > ul').empty()
                JSON.parse(listEle).map(function (value, index) {
                    console.log(value, index)
                    if(index === 0){
                        $('.ResultListDiv > ul').append(
                            '<li style="border-bottom: 0;">' +
                            '   <div class="ResultListHeadDiv2">' +
                            '       <div class="ResultListHead2">' +
                            '           <img src="' + value.avatarurl + '" class="ResultListPersonalHead2">' +
                            '       </div>' +
                            '       <div class="ResultPersonalNameDiv">( ' + value.count + '票 )</div>' +
                            '       <div class="ResultNum2">买单的就是“<span>' + value.nickname + '</span>”了</div>' +
                            '   </div>' +
                            '</li>'
                        )
                    } else {
                        $('.ResultListDiv > ul').append(
                            '<li>' +
                            '   <div class="ResultNumDiv">' + (index + 1) + '</div>' +
                            '       <div class="ResultListHeadDiv">' +
                            '<!-- <img src="__IMG__/HeadPortraitBG1.png" class="ResultListHeadImgBorder"> -->' +
                            '           <img src="' + value.avatarurl + '" class="ResultListHeadImg">' +
                            '       </div>' +
                            '       <div class="ResultListNameDiv">' + value.nickname + '</div>' +
                            '   <div class="ResultListNumOfVotesDiv">' + value.count + '票</div>' +
                            '</li>'
                        )
                    }

                })
            }
        }, 1000)