The problem and solutions that setInterval can’t clear when messaging in VUE

Recently, two components are needed, and a polling is obtained, and then passed to another component to perform horizontally scrolling show, and the result is getting faster and faster. Here you record remind yourself. The code scrolling code is at the bottom, which is convenient for the next time.

Problem Background: Recently, the component A acquisition message is used by polling. After the component A is acquired, the messages in the component A are passed to another component B, when the component B When you receive a message, let the message scroll on the page on the page.

Implementation: The framework for this project application is Vue. After the component A gets a new message, the central event bus is triggered, and the event monitor is performed in the component B, adding it into an array, when judging The scrolling function is triggered when the timer does not move. The function of the message scrolling is extracted from the message array, then use the timer to scroll, clear the timer when the message scrolls to the edge.

Problem: The message can be scrolled in the process of rolling, which can be scrolled at a given speed, but when the time is growing, the message scrolling speed is increasingly problematic.

Cause: When this problem occurs, my first thought is that setInterval is not cleared, because when the timer is not cleared, the timer will cause multiple timers to execute simultaneously, such as The first time is a timer, then click on the two timers, this time is +2 each time, so the speed continues to improve. I saw the scroll function I set up, and when the message scrolls to the edge, the timer is cleared, so there is no problem in the scroll function. I also read the event listener of the central event bus and found the problem here. Because I judge whether it is destroyed when it is destroyed, it is directly determined whether the type is a number or null. Since the timer starts running, each returned is an ID (number), rather than the beginning of the object, causing the same When a message starts scrolling, receive a new message, then make two timers run simultaneously, there is this problem.

Solution: When the message scrolls to the edge of the box, it is assigned null, then modifies the event monitoring of the central event, and it is not determined.The condition of the timer is modified to NULL, then meet the conditional call message scroll function.

     Document   * {Margin: 0; Padding: 0;} # {Position: Relative; Width: 10%; Margin: 30px auto; line-height: 30px; height: 30px; border: 1px solid red; overflow: Hidden;} #} #}; line-height: 30px; display: inline-block;}      123   [ Var wape = document.getlementByid ('title'); let contentEle = document.getlementByid ('content'); let arr = [{news: 'This is a 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'); = allwidth + 'px'; let speted = 2; let time = 50; time = setInterval (() => {let itemplaAl = getCurrentStyle (item, 'left'); if (itemplacing 
< -itemWidth) { clearInterval(timer); } = itemPlace - speed + 'px'; }, time) } function getCurrentStyle (ele, attr) { return window.getComputedStyle ? parseInt(window.getComputedStyle(ele, null)[attr]) : parseInt(ele.currentStyle[attr] ); }
The above is the problem and solution to the message horizontal scrolling when the message is introduced to everyone, I hope that everyone can help, if you have If you have any questions, please leave a message, the small package will reply to everyone in time. I am very grateful to everyone in Tumi Cloud website!

If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment