[前端开发] HTML CSS JavaScript 深入学习 - 定时器

HTML + CSS + JavaScript 深入学习 - 定时器

    • 事件
      • 事件触发器
      • 事件处理程序
    • 定时器
      • setTimeout()
      • setInterval()
      • 取消定时器
    • 总结

事件

事件是 Web 开发中的重要概念,通过事件,用户可以与页面元素进行交互,触发相应的功能或效果。在 HTML、CSS 和 JavaScript 中,事件处理是实现交互的关键之一。

  • 概念指路 常见的 HTML CSS JavaScript 事件

事件触发器

事件触发器是指可以触发事件的源头,它可以是页面元素(如按钮、输入框)、浏览器窗口或文档本身。当用户执行特定动作(如点击、键盘输入)时,事件触发器会产生相应的事件,并将事件传递给事件处理程序。

事件处理程序

事件处理程序是指响应事件触发器的函数或代码块,它定义了当特定事件发生时要执行的操作。通过事件处理程序,可以实现对用户交互的响应,包括页面元素的动态更新、数据提交等操作。

定时器

定时器是 JavaScript 中用于延时执行或定期执行代码的功能。通过定时器,可以实现动画效果、定时更新数据等功能。

setTimeout()

setTimeout() 函数用于延时执行指定的函数或代码片段,它接受两个参数:要执行的函数或代码片段,以及延时时间(单位为毫秒)。在指定的延时时间后,函数或代码片段会被添加到任务队列中,等待执行。

DOCTYPE html>
<html>
<head>
    <title>setTimeout() 示例title>
head>
<body>
    <script>
        setTimeout(function(){
            console.log("延时执行");
        }, 3000);
    script>
body>
html>

setInterval()

setInterval() 函数与 setTimeout() 类似,不同之处在于它会每隔一段时间执行一次指定的函数或代码片段,而不是在延时后执行一次。通过 setInterval() 可以实现周期性的任务执行。

DOCTYPE html>
<html>
<head>
    <title>setInterval() 示例title>
head>
<body>
    <script>
        setInterval(function(){
            console.log("定时执行");
        }, 1000);
    script>
body>
html>

取消定时器

可以使用 clearTimeout() 取消由 setTimeout() 创建的定时器,以及使用 clearInterval() 取消由 setInterval() 创建的定时器。这样可以避免定时器持续执行,节省资源。

var timer = setTimeout(function(){
    console.log("延时执行");
}, 3000);

clearTimeout(timer); // 取消定时器

总结

定时器是 Web 开发中不可或缺的部分,它们为用户提供了与页面交互的方式,并且能够实现动态效果和定时任务。通过深入理解事件与定时器的原理和应用,可以更好地开发出功能丰富、交互性强的网页应用。

你可能感兴趣的:(前端学习,基础概念,html,css,javascript,html5,css3,es6,前端)