JS实现给不同元素设置不同的定时器

实现给不同元素设置不同的定时器主要依赖于JavaScript的定时器函数setInterval()和clearInterval()。下面是实现的步骤和注意事项：

步骤：

1. 首先，为不同的元素设置不同的ID或者Class。

2. 在JavaScript中，使用setInterval()函数来设置定时器，该函数会在一定时间间隔内反复运行一个函数。

3. 定义一个执行函数，用来完成需要在定时器内执行的任务。

4. 在执行函数中调用需要修改的元素的相关属性或者方法，以实现对元素的操作。

5. 最后，通过clearInterval()函数来取消定时器，以避免造成浏览器的卡顿或者内存泄漏等问题。

两条示例说明：

示例1：

在以下HTML代码中，我们需要实现对两个不同的div元素分别添加定时器。

<div id="box1">Box1</div>
<div class="box2">Box2</div>

JS实现如下：

// 获取元素
var box1 = document.getElementById('box1');
var box2 = document.querySelector('.box2');

// 定义执行函数
function run1() {
  // 变色
  box1.style.backgroundColor = 'red';
}
function run2() {
  // 变色
  box2.style.backgroundColor = 'blue';
}

// 设置定时器
var timer1 = setInterval(run1, 1000);
var timer2 = setInterval(run2, 2000);

// 取消定时器，避免内存泄漏或卡顿
setTimeout(function() {
  clearInterval(timer1);
  clearInterval(timer2);
}, 6000);

在上述代码中，我们对ID为box1和Class为.box2的两个元素进行了定时器设置。通过执行函数run1()和run2()，分别对两个元素进行了变色的操作。并通过setInterval()函数实现了在不同时间间隔内执行不同函数的效果。最后，通过clearInterval()函数在6秒后取消了定时器。

示例2：

在以下HTML代码中，我们需要实现对多个相同元素分别添加定时器。

<ul class="item">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<ul class="item">
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

JS实现如下：

// 获取所有元素
var items = document.querySelectorAll('.item');

// 定义执行函数
function run() {
  // 隐藏所有元素
  for (var i = 0; i < items.length; i++) {
    items[i].style.display = 'none';
  }
  // 显示下一个元素
  this.index++;
  if (this.index >= items.length) {
    this.index = 0;
  }
  items[this.index].style.display = 'block';
}
// 初始化index
for (var i = 0; i < items.length; i++) {
  items[i].index = -1;
  run.call(items[i]);        //第一次手动调用函数
}

// 设置定时器
var timer = setInterval(function() {
  for (var i = 0; i < items.length; i++) {
    run.call(items[i]);
  }
}, 2000);

// 取消定时器，避免内存泄漏或卡顿
setTimeout(function() {
  clearInterval(timer);
}, 6000);

在上述代码中，我们对所有Class为.item的元素分别设置了定时器。在执行函数run()中，我们通过循环遍历的方式对多个元素进行相关属性或方法的操作。this.index表示当前元素的索引，用来实现循环切换元素的显示和隐藏。我们通过给每个元素添加index属性的方式来实现在不同元素之间单独存储index值的需求。在代码中，我们手动调用了一次run()函数以初始化index值并且显示第一个元素。最后，通过clearInterval()函数在6秒后取消了定时器。