如何使已经在 setInterval + 循环内的文本闪烁

Question

我有一个用于队列系统中回复时间的脚本。我希望突出显示红色/橙色的文本闪烁。我不确定如何执行此操作，因为它已经位于还包含 for 循环的 setInterval 块内。

var first30Rex = /\b([0-2]?[1-9]|10|20|30)\s(minute|minutes)\sago\b/
var second30Rex = /\b([3-5]{1}[0-9]|40|50|60)\s(minute|minutes)\sago\b/
var hrRex = /[0-9]{1,2}\s(hour|hours)\sago/
var dateRegex = /\d{4}-\d{2}-\d{2}/

var hourAlarmEnabled = true
var dayAlarmEnabled = true

window.addEventListener('load',function(){

    var checkQueue = setInterval(replyTimer,2000)

    function replyTimer(){
        if (document.URL != https://my.site.com/#/app/queue){return}
        let replyTime = document.getElementsByClassName("date-updated")
        let date = document.getElementsByClassName("calendar")
        let status = document.getElementsByClassName("item-status")
        for (let i=0; i<replyTime.length; i++){
            if (replyTime[i].innerText.includes("REPLY")){return}
            if (status[i].innerText.includes("Yes")){
                if (first30Rex.test(replyTime[i].innerText)){
                    replyTime[i].innerText = "REPLY - " + replyTime[i].innerText
                    replyTime[i].style.fontWeight = "bold"
                    replyTime[i].style.color = "green"
                }
                else if (second30Rex.test(replyTime[i].innerText)){
                    replyTime[i].innerText = "REPLY - " + replyTime[i].innerText
                    replyTime[i].style.fontWeight = "bold"
                    replyTime[i].style.color = "orange"
                }
                else if (hrRex.test(replyTime[i].innerText)){
                    replyTime[i].innerText = "REPLY > " + replyTime[i].innerText
                    replyTime[i].style.fontWeight = "bold"
                    replyTime[i].style.color = "red"
                    if(hourAlarmEnabled) alert("You have items in the queue which require your attention. The customer has been waiting for a response for 1 hour or longer.")
                    hourAlarmEnabled = false
                }
                else if (dateRegex.test(date[i].innerText)){
                    replyTime[i].style.fontWeight = "bold"
                    replyTime[i].style.color = "magenta"
                    if(dayAlarmEnabled) alert("You have items in the queue which require your attention. The customer has been waiting for a response for over a day.")
                    dayAlarmEnabled = false
                }
            }
        }
    }
}
)

我尝试过嵌套 setIntervals （使用clearInterval 语句），但似乎无法解决。非常感谢任何帮助！

Answer 1

创建一个单独的间隔，例如

    var blinkInterval = setInterval(function() {
            let replyTime = document.getElementsByClassName("date-updated");
            for (var i = 0; i < replyTime.length; i++) {
              if (replyTime[i].style.visibility=="hidden") {
                replyTime[i].style.visibility="visible";
              } else {
                replyTime[i].style.visibility="hidden";
              }
            }
    }, 1000);

<p class="date-updated">Hello World</p>