資訊專(zhuān)欄INFORMATION COLUMN
摘要：解決方式當(dāng)消息滾動(dòng)到盒子邊緣銷(xiāo)毀定時(shí)器時(shí)將其賦值為，然后修改中央事件的事件監(jiān)聽(tīng)將其判斷沒(méi)有定時(shí)器的條件修改為然后滿(mǎn)足條件的調(diào)用消息滾動(dòng)函數(shù)。
最近在做項(xiàng)目時(shí),需要進(jìn)行兩個(gè)組件聯(lián)動(dòng),一個(gè)輪詢(xún)獲取到消息,然后將其傳遞給另外一個(gè)組件進(jìn)行橫向滾動(dòng)展示,結(jié)果滾動(dòng)的速度越來(lái)越快。這里記錄一下來(lái)提醒自己。消息滾動(dòng)的代碼在最下面,方便下次使用。
問(wèn)題背景: 最近在做一個(gè)需求,組件A獲取消息采用的是輪詢(xún),組件A獲取到新的消息后,將組件A中的消息傳遞給另外一個(gè)組件B,當(dāng)組件B接收到消息時(shí)就讓消息在頁(yè)面上滾動(dòng)播放。
實(shí)現(xiàn)思路: 這個(gè)項(xiàng)目應(yīng)用的框架為VUE,當(dāng)組件A獲取到新的消息之后,就觸發(fā)中央事件總線(xiàn),在組件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)題。我又看了下中央事件總線(xiàn)的事件監(jiān)聽(tīng)器,發(fā)現(xiàn)問(wèn)題在這里。因?yàn)槲以谂袛嘁粋€(gè)定時(shí)器是否被銷(xiāo)毀時(shí),直接判斷其類(lèi)型是 數(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)到盒子邊緣銷(xiāo)毀定時(shí)器時(shí),將其賦值為null，然后修改中央事件的事件監(jiān)聽(tīng),將其判斷沒(méi)有定時(shí)器的條件修改為null,然后滿(mǎn)足條件的調(diào)用消息滾動(dòng)函數(shù)。
橫向滾動(dòng)的代碼:
Document
123
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/106878.html
摘要：讓用戶(hù)可以滾動(dòng)頁(yè)面。事件中拿到想要的后瀏覽器已經(jīng)隱藏地址欄和工具欄，放開(kāi)插件滾動(dòng)。發(fā)現(xiàn)派發(fā)的方法在父組件中監(jiān)聽(tīng)后獲取位置參數(shù)的效果不太好必須要手指貼著滑動(dòng)才可以這個(gè)設(shè)置為可以實(shí)時(shí)派發(fā)滾動(dòng)事件和位置參數(shù)其他坑點(diǎn)待發(fā)現(xiàn)歡迎大佬一起交流 寫(xiě)在前面 由于最近一個(gè)移動(dòng)端項(xiàng)目中許多地方有滾動(dòng)需求, 橫向,縱向的都有,所以就基于better-scroll封裝了一個(gè)通用的滾動(dòng)組件,期間也踩了一些坑,有...
摘要：懶加載方式常見(jiàn)的有淘寶一屏用元素占據(jù)一定的高度，然后再去拉圖片數(shù)據(jù)。但這種方式還是需要元素占位，淘寶一頁(yè)的數(shù)據(jù)量其實(shí)不算大，因?yàn)樗Y(jié)合了分頁(yè)。 背景 showImg(https://segmentfault.com/img/bVbhSVh?w=1606&h=440);大數(shù)據(jù)項(xiàng)目根據(jù)用戶(hù)輸入代碼查詢(xún)數(shù)據(jù)，用戶(hù)的代碼不可控（比如select from db limit 5000），有可能...
摘要：設(shè)計(jì)本次留言墻分為兩部分。活動(dòng)展示部分為匿名留言墻形式后改為實(shí)名制，需要根據(jù)收到的留言墻進(jìn)行向上平滑滾動(dòng)，如果沒(méi)有消息接收則停止在最后一條消息上。主要為處理數(shù)據(jù)的數(shù)據(jù)層。 背景 由于某事業(yè)群需要留言墻用于年會(huì)，同時(shí)需要調(diào)用大象公眾號(hào)服務(wù)器接口，所以在今年年初開(kāi)發(fā)了留言墻用于活動(dòng)現(xiàn)場(chǎng)交流。 設(shè)計(jì) 本次留言墻分為兩部分。一部分為活動(dòng)展示部分，另一部分為后臺(tái)審批部分。 活動(dòng)展示部分為匿名留言...
摘要：先看效果介紹一個(gè)簡(jiǎn)單的靜態(tài)頁(yè)面主要是使用做橫向滾動(dòng)，點(diǎn)擊標(biāo)簽滾動(dòng)到相應(yīng)位置，以及滾到相應(yīng)位置后對(duì)應(yīng)標(biāo)簽顯示紅色。 先看效果 showImg(https://segmentfault.com/img/bVbqAdC?w=374&h=626); 介紹 一個(gè)簡(jiǎn)單的靜態(tài)頁(yè)面主要是使用 better-scroll 做橫向滾動(dòng)，點(diǎn)擊標(biāo)簽滾動(dòng)到相應(yīng)位置，以及滾到相應(yīng)位置后對(duì)應(yīng)標(biāo)簽顯示紅色。開(kāi)發(fā)過(guò)程中...
摘要：是一款高性能的前端開(kāi)發(fā)引擎。這些功能模塊的被放置在一起時(shí)，將很難避免相互影響，造成難以測(cè)試的。結(jié)尾的文檔目前還不夠完善，但完全可以滿(mǎn)足必要的開(kāi)發(fā)。 前言 之前公眾號(hào)《前端早讀課》推了我的文章（在這里表示感謝），很多同學(xué)有在底下留言，問(wèn)我 Ionic 和 IOING 是什么關(guān)系？從名字來(lái)看兩者的開(kāi)頭雖然都是 IO 打頭但其實(shí)兩者毫無(wú)關(guān)系，一丁點(diǎn)兒都沒(méi)有。 IOING 是一款高性能的前端開(kāi)...
閱讀 1459·2021-11-22 13:52
閱讀 1281·2021-09-29 09:34
閱讀 2690·2021-09-09 11:40
閱讀 3030·2019-08-30 15:54
閱讀 1255·2019-08-30 15:53
閱讀 971·2019-08-30 11:01
閱讀 1354·2019-08-29 17:22
閱讀 1943·2019-08-26 10:57
