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)