1. Implement in VUE mainly using native principles (concatenate strings by yourself)
<template> <div> <div>{{ times }}</div> </div> </template> <script> export default { data() { return { times: "", }; }, mounted() { setInterval(() => { var datetime = new Date(); var year = datetime.getFullYear(); / / ternary judgment at this time, in fact, can make use of the method of the String padStart to completion, usage String. Prototype. PadStart. Call (xx, 2, "0"), the first parameter to supplement the elements, the second parameter said make up two, Var month =datetime.getMonth() + 1 < 10? "0" + (datetime.getMonth() + 1): datetime.getMonth() + 1; var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate(); var hour = datetime.getHours() < 10 ? "0" + datetime.getHours():datetime.getHours(); var minutes = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes():datetime.getMinutes(); var seconds = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds():datetime.getSeconds(); This. Times = year+" /" + month+" /" + date+" /" + hour+" : "+ minutes+" : "+ seconds; console.log( this.times) }, 1000); }}; </script>Copy the code
- This way, we’re updating this string every second, but in fact, every second is not changing every hour, so it’s actually not performing very well, and on demand, we should update the view locally, so we can make it a component on demand, and then render on demand
2. Use the local time representation (select the appropriate display mode according to the language)
<template> <div> <div>{{ times }}</div> </div> </template> <script> export default { data() { return { times: "", }; }, mounted() {setInterval() => {this.times = new Date().tolocaleString (); }, 1000); // Get rid of the extra computation and the result will be more adaptable},}; </script>Copy the code
3. Encapsulate a week’s worth of time
function getDate () {
const now = new Date(a)const y = now.getFullYear()
const month = now.getMonth() + 1 < 10 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1
const d = now.getDate() < 10 ? '0' + now.getDate() : now.getDate()
const h = now.getHours() < 10 ? '0' + now.getHours() : now.getHours()
const m = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()
const s = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds()
const w = 'week' + 'Day one, two, three, four, five, six.'.charAt(now.getDay())
this.timeNow = h + ':' + m + ':' + s
this.weekNow = w
this.dataNow = y + '/' + month + '/' + d
return this.timeNow && this.weekNow && this.dataNow
}
Copy the code
4. Note: What are macro tasks and micro tasks?
Juejin. Cn/post / 688078…
- 1. The setInterval timer involved here is a macro task because it is executed in different processes
- 2. There is a problem. If JS is blocked, subsequent JS code will not be executed, but the timer will continue to run
- 3. In this case, every 1 second, the timer will send a signal to execute the task, at this time, because JS is blocked, in fact, the signal reception is blocked, or even received a bunch of tasks, can not be immediately executed
- 4. When the time switches to the time when there are remaining resources to execute, the accumulated tasks will be executed all at once, which will cause a terrible result, resulting in a large amount of redrawing at a moment
- 5. This redraw only occurs when using native and setInterval. Why?
- (1) Because Vue’s rendering design is microtasks, a large number of accumulated tasks are executed synchronously, and the previous timer informs that this action is performed asynchronously, so it will not cause a large amount of redrawing for Vue
- (2) However, this.times will still be set many times at a time, which means that the Vue has been hijacked for many times, and the logic inside the Vue will also go through many times at a time
- (3) It’s only because I display the real-time time on the page that it doesn’t cause a problem
- 6. If the switch to the countdown, according to a lot of people will be set minus 1 per second, it will become, when blocked, the countdown, blocked, the countdown is normal, because the resources already occupied, not redraw also normal, but, if you have any resources when, suddenly will be executed multiple times, you will see the screen crazy diminishing the countdown, but actually, Just update it once when there are enough resources, so one way to do that is to replace setInterval with setTimeout
- 7. Use setTimeout+ recursion to replace setInterval. SetTimeout still has the same problems as setInterval, but there will be a difference. The timer only notifies you once to execute a callback, and in fact, you should always use setTimeout, and use setInterval sparingly, because it’s so easy to get blocked
- Common blocking scenario: browser TAB page switch, the browser will suspend the TAB page execution stack, that is, no longer execute JS, this is equivalent to blocking
- Event management is regardless of the TAB page, it has the browser time management unified management, setInterval is to let the timer tell the main thread at intervals to execute a task, and then call itself said to use setTimeout to achieve the effect of setInterval, must write recursive method, call itself
- 8. Finally, there are problems with macro tasks, even if setTimeout is changed to setTimeout, there are still problems. There are two problems:
- (1) The macro task must be greater than or equal to 1 second after it is set because of resource switching
- (2) The actual execution of the start is uncertain, because you can’t guarantee that the start time of the program execution will be exactly the whole second
- 9. Because of the above two questions, maybe for seconds, feel nothing, but for minutes? Because meow is not the smallest unit at the front end and can obtain a value more accurate than the second, a more precise method should always be used to obtain data. The smallest unit that can be obtained at the front end is a high-precision microsecond
- SetTimeout and setInterval can’t do anything but seconds. But what about the decimal point after the second? How often should it be updated?
- 11. We don’t know how many seconds to get the time, because time is constantly changing, but we know the render interval, just get the exact time in real time on each render, so the best way to do this is not to use macro tasks, but to use microtasks
- Countdown implementation:
Juejin. Cn/post / 688265…