最近在做項(xiàng)目時(shí),需要進(jìn)行兩個(gè)組件聯(lián)動(dòng),一個(gè)輪詢獲取到消息,然后將其傳遞給另外一個(gè)組件進(jìn)行橫向滾動(dòng)展示,結(jié)果滾動(dòng)的速度越來(lái)越快。這里記錄一下來(lái)提醒自己。消息滾動(dòng)的代碼在最下面,方便下次使用。
問(wèn)題背景: 最近在做一個(gè)需求,組件A獲取消息采用的是輪詢,組件A獲取到新的消息后,將組件A中的消息傳遞給另外一個(gè)組件B,當(dāng)組件B接收到消息時(shí)就讓消息在頁(yè)面上滾動(dòng)播放。
實(shí)現(xiàn)思路: 這個(gè)項(xiàng)目應(yīng)用的框架為VUE,當(dāng)組件A獲取到新的消息之后,就觸發(fā)中央事件總線,在組件B中進(jìn)行事件監(jiān)聽(tīng),將其添加進(jìn)入一個(gè)數(shù)組,當(dāng)判斷定時(shí)器沒(méi)有運(yùn)動(dòng)時(shí),就觸發(fā)滾動(dòng)的函數(shù)。消息滾動(dòng)的函數(shù)是從消息數(shù)組中提取出第一條,然后利用定時(shí)器進(jìn)行消息滾動(dòng),當(dāng)消息滾動(dòng)到邊緣時(shí)清除定時(shí)器。
問(wèn)題:消息在滾動(dòng)的過(guò)程中,該開(kāi)始還能夠按照給定的速度進(jìn)行滾動(dòng),可是當(dāng)時(shí)間變長(zhǎng)后就會(huì)出現(xiàn)消息滾動(dòng)的速度越來(lái)越快的問(wèn)題。
原因:當(dāng)出現(xiàn)這個(gè)問(wèn)題時(shí),我第一個(gè)念頭就是setInterval沒(méi)有被清掉,因?yàn)楫?dāng)定時(shí)器沒(méi)有清掉之后又再次調(diào)用定時(shí)器就會(huì)導(dǎo)致多個(gè)定時(shí)器同時(shí)執(zhí)行,比如第一次是一個(gè)計(jì)時(shí)器,再點(diǎn)一下是就是兩個(gè)定時(shí)器,這時(shí)候每次就是+2,所以速度不斷提升。我看了一下我設(shè)置的滾動(dòng)函數(shù),里面當(dāng)消息滾動(dòng)到邊緣時(shí),就清除這個(gè)定時(shí)器,所以在滾動(dòng)函數(shù)中沒(méi)有問(wèn)題。我又看了下中央事件總線的事件監(jiān)聽(tīng)器,發(fā)現(xiàn)問(wèn)題在這里。因?yàn)槲以谂袛嘁粋€(gè)定時(shí)器是否被銷毀時(shí),直接判斷其類型是 數(shù)字 還是 null,由于當(dāng)定時(shí)器開(kāi)始運(yùn)行時(shí),每一次返回的都是一個(gè)ID(數(shù)字),而不是一開(kāi)始的對(duì)象,導(dǎo)致當(dāng)一條消息開(kāi)始滾動(dòng)時(shí),又接收到一條新的消息,然后就使得兩個(gè)定時(shí)器同時(shí)運(yùn)行,從而出現(xiàn)這個(gè)問(wèn)題。
解決方式:當(dāng)消息滾動(dòng)到盒子邊緣銷毀定時(shí)器時(shí),將其賦值為null，然后修改中央事件的事件監(jiān)聽(tīng),將其判斷沒(méi)有定時(shí)器的條件修改為null,然后滿足條件的調(diào)用消息滾動(dòng)函數(shù)。
橫向滾動(dòng)的代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } #title { position: relative; width: 10%; margin: 30px auto; line-height: 30px; height: 30px; border: 1px solid red; overflow: hidden; } #content { position: absolute; left: 0; line-height: 30px; display: inline-block; } </style> </head> <body> <div id="title"> <span id="content">123</span> </div> <script> var wrapEle = document.getElementById('title'); let contentEle = document.getElementById('content'); let arr = [ {news: '這是一條新聞'} ]; let timer = null; move(wrapEle, contentEle); function move(wrap, item) { clearInterval(timer); if (!arr.length) { return false;} item.innerHTML = arr[0].news; arr.splice( 0, 1 ); let allWidth = getCurrentStyle(wrap, 'width'); let itemWidth = getCurrentStyle(item, 'width'); item.style.left = allWidth + 'px'; let speed = 2; let time = 50; timer = setInterval( () => { let itemPlace = getCurrentStyle(item, 'left'); if (itemPlace < -itemWidth) { clearInterval(timer); } item.style.left = itemPlace - speed + 'px'; }, time) } function getCurrentStyle (ele, attr) { return window.getComputedStyle ? parseInt(window.getComputedStyle(ele, null)[attr]) : parseInt(ele.currentStyle[attr] ); } </script> </body> </html>
新聞熱點(diǎn)
疑難解答
圖片精選
