javascript - Native JS implementation of sending verification code seconds

Question

1. Now there is a problem as shown in the title. I want to have a login page, but it is based on the remote control. When binding a mobile phone, a verification code needs to be sent to the mobile phone, and then the label of the button will decrease over time, 60s, 50s... 0s, etc. During the seconds count, I may also operate up, down, left, and right.

2. The problem is like this. After a little understanding, js is running in a single thread. My action of counting seconds is parallel to switching the focus up, down, left, and right while I count seconds. In my understanding, it is a two-thread operation. So I don’t understand, how to implement it? Seek advice from experts.

Answer 1

Open a setInterval and automatically disable the button after 60 seconds

Time decreases during running

For example

//伪代码、思路是这样
var i = 60;
var interval;
interval = setInterval(function(){
    document.getElementById("testBtn").innerHTML(i+'s')
    i = i-1
    if(i<=0){
        clearInterval(interval)
        //解除你的btn不可点击
    }
},1000)

Answer 2

The timer is executed asynchronously, and the timing is completed by another worker thread and will not affect the main thread. When the timer time arrives, the callback function to be executed will be placed in the task queue, and the callback function will be called by the main thread.

So operations on the main thread will not affect the timer.

Answer 3

Don’t worry about thread issues, just setInterval