JS 簡單實現公告訊息自動逐條切換

2021-09-12 23:59:28 字數 1544 閱讀 4743

因為要適配ios前端，所以在想最簡實現乙個靜態資料的**滾動欄，研究時直接用了當前執行的reactjs框架實現，於是昨天先打了個草稿。經測試在iphone6s plus a1699 version 12.1.2上顯示正常。

import react from 'react'


class scrollmessagepage 


let messagelist = 


for (let i = 0; i < 3; i++) 


let box = document.getelementbyid('scroll-message')


box.style.height = '30px'


box.style.overflow = 'hidden'


function createelement(text) 


messagelist.map(text => )


this.timer = setinterval(() => , 3000)


}componentwillunmount() 


render()   


} export default scrollmessagepage
經過今天的測試發現，在第一次載入計時器的時候滾動條會將滾動資料第二條資料快速跳過，造成不好的使用者體驗，另外頻繁的操作dom也會造成效能損耗，於是使用了文件碎片對滾動條進行優化

let box = document.getelementbyid('scroll-message')


let fragement = document.createdocumentfragment('div')


let message = document.createelement('div')


message.style.height = '30px'


message.style.overflow = 'hidden'


function createelement(text, style, ele = message) 


let messagelist = 


for (let i = 0; i < 2; i++) 


messagelist.map((text, index) => createelement(text, index===0?:null))


this.timer = setinterval(() => , 3000)
【如何修復資料跳過bug】此次更新修復了滾動條在第一次計時器執行時跳過第二條資料的問題，發生問題的原因是因為初始化公告欄資料的時候並未新增margintop，在計時器執行之後第二條資料原本會替換第一條資料的位置，然而因為第一條資料被刪除所以跑到第一條資料位置上面，我通過直接將第二條資料初始化到第一條資料的位置解決了該問題。

【處理效能損耗】使用計時器頻繁對dom進行操作，會使整個頁面頻繁進行dom渲染，解決效能損耗的問題我參考 createdocumentfragment();方法實現，將該公告欄dom插入到該方法建立的文件碎片，將子元素插入到文件片段時不會引起頁面回流。

小結

PHP Redis 實現簡單訊息佇列

redis做訊息佇列的好處在於它的輕量級，高併發，延遲敏感，應用場景有 即時資料分析 秒殺計數器 快取等 redis做訊息佇列待解決的問題 1 訊息的可靠性 沒有相應的機制保證訊息的消費，當消費者消費失敗的時候，訊息體丟失，需要手動處理。生產者只管向佇列中插入資料，不管消費者是否成功消費。2 消費者...

站內訊息彈出層簡單實現

由於專案中用到的是dwz框架，想整合layui的彈出層元件，牽扯太多太麻煩，索性自己動手，實現下站內訊息推送右下角彈出層進行提示。可直接複製使用，樣式撿漏，稍微再調一下吧，簡單展示下。展示效果 完整 如下 呼叫方法如下 在任一頁面如下呼叫即可彈出彈出層 當然了，上面的實現 需要放在layouts主體...

php redis實現簡單的訊息佇列

redis redis是乙個開源，高階的鍵值儲存和乙個適用的解決方案，用於構建高效能，可擴充套件的web應用程式。redis有三個主要特點，使它優越於其它鍵值資料儲存系統 redis支援的資料型別有 stirng 字串 list 列表 hash 字典 set 集合 sorted set 有序集合 r...