标题：深入理解 JavaScript 中的定时器

目录

一、定时器的基本概念

1. setInterval

2. setTimeout

二、代码示例分析

---

一、定时器的基本概念

在 JavaScript 中，定时器是一种用于在特定时间间隔后执行代码或者重复执行代码的机制。主要包含两种类型的定时器：setInterval和setTimeout。

1. setInterval

• setInterval()是一个周期函数，它会在指定的时间间隔后，重复执行指定的函数。例如：

var i = 0;
var hh = function () {
    if (i == 10) {
        clearInterval(timer);
    }
    console.log(i++);
};
var timer = setInterval(hh, 1000);

在上述代码中，setInterval(hh, 1000)表示每 1000 毫秒（1 秒）就会执行一次hh函数，直到i的值等于 10 时，通过clearInterval(timer)停止定时器。

2. setTimeout

• setTimeout()是一个延迟定时器，它会在指定的延迟时间后执行一次指定的函数。比如：

var i = 0;
setTimeout(function () {
    console.log(i++);
}, 4000);

这里的代码会在 4000 毫秒（4 秒）后执行一次匿名函数。

二、代码示例分析

以下是一个更复杂的结合了 HTML 和 JavaScript 的示例：

• 在这个示例中，当页面加载完成（window.onload）后，通过document.querySelector获取 HTML 中的元素。点击 “开始” 按钮（start.onclick）时，启动一个setInterval定时器，每 10 毫秒改变一次.container元素的背景颜色渐变角度。点击 “结束” 按钮（stop.onclick）时，使用clearInterval(timer)停止定时器。
• 这个例子展示了定时器在实际网页开发中的应用，通过控制定时器的启动和停止，可以实现丰富的交互效果。