Home > Web Front-end > Front-end Q&A > How to trigger javascript timer

How to trigger javascript timer

王林
Release: 2023-05-09 19:56:07
Original
974 people have browsed it

Timer (timer) is an important feature of JavaScript, used to delay the execution of tasks or perform tasks periodically. In many web applications, especially those with high real-time requirements, timers play an important role. Triggering a timer is the first step to using a timer. This article will introduce how to trigger a JavaScript timer.

1. Basic usage of timers

In JavaScript, you can use the setTimeout function to create a timer. The setTimeout function has two parameters: the first parameter is the task to be executed, and the second parameter is the delay time before the task is executed, in milliseconds. For example:

var timer = setTimeout(function() {
    console.log('This is a timed task');
}, 1000);
Copy after login

The above code creates a timer named timer, which will execute an anonymous function after 1000 milliseconds and output a string in the function. This timer will only be executed once and will be destroyed after execution.

Sometimes you need to perform a task periodically, you can use the setInterval function to create a periodic timer. The setInterval function also has two parameters: the first parameter is the task to be executed, and the second parameter is the delay time before the task is executed. For example:

var timer = setInterval(function() {
    console.log('This is a periodic task');
}, 1000);
Copy after login

The above code creates a timer named timer, which will execute an anonymous function every 1000 milliseconds and output a string in the function. This timer will run periodically until stopped manually.

2. Conditional trigger timer

Sometimes it is necessary to trigger a timer only when a certain condition is met. For example, you need to delay the execution of some code after the user clicks a button. At this time, you can use a conditional judgment to trigger the timer after waiting for the condition to be met. For example:

// 为按钮绑定click事件
document.getElementById('btn').addEventListener('click', function() {
    // 等待3秒后执行任务
    var timer = setTimeout(function() {
        console.log('Task after 3 seconds');
    }, 3000);
    
    // 在3秒内再次点击按钮,取消计时器
    var that = this;
    this.disabled = true;
    setTimeout(function() {
        that.disabled = false;
    }, 3000);
});
Copy after login

The above code binds a click event to a button. When the user clicks the button, a timer named timer will be created, which will execute an anonymous function after 3 seconds. In the function Output a string. At the same time, the button is disabled when the timer is created and cannot be clicked again for 3 seconds. If the user clicks the button again within 3 seconds, the timer execution will be canceled and the button will be enabled.

3. Manually trigger the timer

Sometimes it is necessary to manually trigger a timer instead of waiting for the timer to trigger automatically when it reaches the time limit. In this case, you need to use the clearTimeout function or clearInterval function to cancel the execution of the timer. For example:

var task = function() {
    console.log('This is a timed task');
};

var timer = setTimeout(task, 1000);

// 手动触发计时器
task();

// 取消计时器
clearTimeout(timer);
Copy after login

The above code creates a timer named timer, which will execute an anonymous function after 1000 milliseconds and output a string in the function. Then manually trigger the timer in the task function task(), and then immediately cancel the execution of the timer.

4. Summary

Timer is an important feature of JavaScript, which can be used to delay the execution of tasks or execute tasks periodically. Triggering a timer is the first step in using a timer. During use, you need to pay attention to controlling the trigger time and execution times of the timer to ensure the stability and performance of the application.

The above is the detailed content of How to trigger javascript timer. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template