欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中消息橫向滾動時setInterval清不掉的問題及解決方法

 更新時間:2019年08月23日 14:29:19   作者:雨夜望月  
最近在做項目時,需要進行兩個組件聯(lián)動,一個輪詢獲取到消息,然后將其傳遞給另外一個組件進行橫向滾動展示,結(jié)果滾動的速度越來越快。接下來通過本文給大家分享Vue中消息橫向滾動時setInterval清不掉的問題及解決方法,感興趣的朋友一起看看吧

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

問題背景: 最近在做一個需求,組件A獲取消息采用的是輪詢,組件A獲取到新的消息后,將組件A中的消息傳遞給另外一個組件B,當組件B接收到消息時就讓消息在頁面上滾動播放。

實現(xiàn)思路: 這個項目應(yīng)用的框架為VUE,當組件A獲取到新的消息之后,就觸發(fā)中央事件總線,在組件B中進行事件監(jiān)聽,將其添加進入一個數(shù)組,當判斷定時器沒有運動時,就觸發(fā)滾動的函數(shù)。消息滾動的函數(shù)是從消息數(shù)組中提取出第一條,然后利用定時器進行消息滾動,當消息滾動到邊緣時清除定時器。

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

原因:當出現(xiàn)這個問題時,我第一個念頭就是setInterval沒有被清掉,因為當定時器沒有清掉之后又再次調(diào)用定時器就會導(dǎo)致多個定時器同時執(zhí)行,比如第一次是一個計時器,再點一下是就是兩個定時器,這時候每次就是+2,所以速度不斷提升。我看了一下我設(shè)置的滾動函數(shù),里面當消息滾動到邊緣時,就清除這個定時器,所以在滾動函數(shù)中沒有問題。我又看了下中央事件總線的事件監(jiān)聽器,發(fā)現(xiàn)問題在這里。因為我在判斷一個定時器是否被銷毀時,直接判斷其類型是 數(shù)字 還是 null,由于當定時器開始運行時,每一次返回的都是一個ID(數(shù)字),而不是一開始的對象,導(dǎo)致當一條消息開始滾動時,又接收到一條新的消息,然后就使得兩個定時器同時運行,從而出現(xiàn)這個問題。

解決方式:當消息滾動到盒子邊緣銷毀定時器時,將其賦值為null,然后修改中央事件的事件監(jiān)聽,將其判斷沒有定時器的條件修改為null,然后滿足條件的調(diào)用消息滾動函數(shù)。

橫向滾動的代碼:

<!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>

總結(jié)

以上所述是小編給大家介紹的Vue中消息橫向滾動時setInterval清不掉的問題及解決方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

相關(guān)文章

  • vue中安裝使用cesium方式(親測可用)

    vue中安裝使用cesium方式(親測可用)

    這篇文章主要介紹了vue中安裝使用cesium方式(親測可用),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • Vue中添加滾動事件設(shè)置的方法詳解

    Vue中添加滾動事件設(shè)置的方法詳解

    這篇文章主要給大家介紹了關(guān)于Vue中添加滾動事件設(shè)置的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-09
  • vant van-list下拉加載更多onload事件問題

    vant van-list下拉加載更多onload事件問題

    這篇文章主要介紹了vant van-list下拉加載更多onload事件問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • vue3+ts 依賴注入provide inject的用法

    vue3+ts 依賴注入provide inject的用法

    vue3中引入新的組件傳值方式,就是provide/inject依賴注入模式,本文主要介紹了vue3+ts 依賴注入provide inject的用法,感興趣的可以了解一下
    2023-11-11
  • 簡單談?wù)刅ue中的diff算法

    簡單談?wù)刅ue中的diff算法

    diff算法的本質(zhì)是找出兩個對象之間的差異,目的是盡可能復(fù)用節(jié)點。,下面這篇文章主要給大家介紹了關(guān)于Vue中diff算法的相關(guān)資料,需要的朋友可以參考下
    2021-09-09
  • vue.js初學(xué)入門教程(1)

    vue.js初學(xué)入門教程(1)

    這篇文章主要為大家詳細介紹了vue.js初學(xué)入門教程,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • 基于axios封裝fetch方法及調(diào)用實例

    基于axios封裝fetch方法及調(diào)用實例

    下面小編就為大家分享一篇基于axios封裝fetch方法及調(diào)用實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • vue如何關(guān)閉eslint檢測(多種方法)

    vue如何關(guān)閉eslint檢測(多種方法)

    我們在開發(fā)vue項目的時候,創(chuàng)建的時候可能會不小心選擇了eslint,所以如果不想讓eslint檢測,我們該怎么辦呢,本文就詳細的介紹了幾種關(guān)閉方法,感興趣的可以了解一下
    2021-12-12
  • uniapp+vue3路由跳轉(zhuǎn)傳參的實現(xiàn)

    uniapp+vue3路由跳轉(zhuǎn)傳參的實現(xiàn)

    本文主要介紹了uniapp+vue3路由跳轉(zhuǎn)傳參的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-11-11
  • Vue.set()和this.$set()使用和區(qū)別

    Vue.set()和this.$set()使用和區(qū)別

    我們發(fā)現(xiàn)Vue.set()和this.$set()這兩個api的實現(xiàn)原理基本一模一樣,那么Vue.set()和this.$set()的區(qū)別是什么,本文詳細的介紹一下,感興趣的可以了解一下
    2021-06-06

最新評論