Vue中消息橫向滾動(dòng)時(shí)setInterval清不掉的問題及解決方法-創(chuàng)新互聯(lián)

最近在做項(xiàng)目時(shí),需要進(jìn)行兩個(gè)組件聯(lián)動(dòng),一個(gè)輪詢獲取到消息,然后將其傳遞給另外一個(gè)組件進(jìn)行橫向滾動(dòng)展示,結(jié)果滾動(dòng)的速度越來越快。這里記錄一下來提醒自己。消息滾動(dòng)的代碼在最下面,方便下次使用。

創(chuàng)新互聯(lián)是專業(yè)的府谷網(wǎng)站建設(shè)公司，府谷接單;提供成都網(wǎng)站制作、做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行府谷網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

問題背景: 最近在做一個(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)聽,將其添加進(jìn)入一個(gè)數(shù)組,當(dāng)判斷定時(shí)器沒有運(yùn)動(dòng)時(shí),就觸發(fā)滾動(dòng)的函數(shù)。消息滾動(dòng)的函數(shù)是從消息數(shù)組中提取出第一條,然后利用定時(shí)器進(jìn)行消息滾動(dòng),當(dāng)消息滾動(dòng)到邊緣時(shí)清除定時(shí)器。

問題:消息在滾動(dòng)的過程中,該開始還能夠按照給定的速度進(jìn)行滾動(dòng),可是當(dāng)時(shí)間變長(zhǎng)后就會(huì)出現(xiàn)消息滾動(dòng)的速度越來越快的問題。

原因:當(dāng)出現(xiàn)這個(gè)問題時(shí),我第一個(gè)念頭就是setInterval沒有被清掉,因?yàn)楫?dāng)定時(shí)器沒有清掉之后又再次調(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ù)中沒有問題。我又看了下中央事件總線的事件監(jiān)聽器,發(fā)現(xiàn)問題在這里。因?yàn)槲以谂袛嘁粋€(gè)定時(shí)器是否被銷毀時(shí),直接判斷其類型是數(shù)字還是 null,由于當(dāng)定時(shí)器開始運(yùn)行時(shí),每一次返回的都是一個(gè)ID(數(shù)字),而不是一開始的對(duì)象,導(dǎo)致當(dāng)一條消息開始滾動(dòng)時(shí),又接收到一條新的消息,然后就使得兩個(gè)定時(shí)器同時(shí)運(yùn)行,從而出現(xiàn)這個(gè)問題。

解決方式:當(dāng)消息滾動(dòng)到盒子邊緣銷毀定時(shí)器時(shí),將其賦值為null，然后修改中央事件的事件監(jiān)聽,將其判斷沒有定時(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>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享標(biāo)題：Vue中消息橫向滾動(dòng)時(shí)setInterval清不掉的問題及解決方法-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://aaarwkj.com/article10/cdpsdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站收錄、網(wǎng)站維護(hù)、軟件開發(fā)、營(yíng)銷型網(wǎng)站建設(shè)、微信公眾號(hào)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

Vue中消息橫向滾動(dòng)時(shí)setInterval清不掉的問題及解決方法-創(chuàng)新互聯(lián)