JavaScript实现手写原生任务定时器

下面是详细讲解“JavaScript实现手写原生任务定时器”的完整攻略：

1. 什么是任务定时器

任务定时器指的是可以在指定时间间隔内重复执行某个函数或者只执行一次某个函数的机制。JavaScript原生的任务定时器包括setInterval和setTimeout两个函数，它们都可以通过回调函数托管一个任务到任务队列中，等待JavaScript引擎空闲后执行任务。

2. 如何手写实现任务定时器

手写实现任务定时器主要依赖于setTimeout函数，我们可以通过不断地调用setTimeout来模拟任务定时器的实现。

下面以一段代码来说明手写原生任务定时器的实现过程：

function interval(fn, time) {
  let timer = null;

  const loop = () => {
    fn();
    timer = setTimeout(loop, time);
  }

  timer = setTimeout(loop, time);

  return {
    cancel: () => {
      clearTimeout(timer);
    }
  }
}

const repeat = interval(() => {
  console.log('Hello World!');
}, 1000);

// 5秒后取消任务定时器
setTimeout(() => {
  repeat.cancel();
}, 5000);

上面的代码中，我们定义了一个名为interval的函数，它接受两个参数：第一个参数是需要重复执行的函数，第二个参数表示时间间隔。在函数体内部，我们定义了一个timer变量来保存每次调用setTimeout函数返回的计时器ID。 在loop函数内部，我们首先调用传入的函数，然后再通过setTimeout调用自身，从而实现重复执行的效果。 在调用interval函数时，我们获得了一个包含cancel函数的对象，我们可以通过调用该函数来取消任务定时器。

3. 示例说明

3.1 实现圆形进度条

我们可以使用任务定时器来实现一个圆形进度条，让它能够模拟一个旋转的动画。

<div class="progress-bar">
  <div class="progress"></div>
</div>

.progress-bar {
  width: 100px;
  height: 100px;
  position: relative;
}

.progress {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #ccc;
  position: absolute;
  top: 0;
  left: 0;

  /* 添加动画效果 */
  animation: rotate-progress 1s linear infinite;
}

@keyframes rotate-progress {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

function rotate() {
  const progress = document.querySelector('.progress');

  // 获取当前的旋转角度
  let deg = parseInt(progress.style.transform.replace(/[^0-9]/g, '')) || 0;

  // 计算下一个旋转角度
  deg = (deg + 5) % 360;

  // 更新旋转角度
  progress.style.transform = `rotate(${deg}deg)`;

  setTimeout(rotate, 50);
}

rotate();

上述代码中，我们首先定义了一个rotate函数，用于更新进度条的旋转角度。在函数体内，我们首先通过querySelector获取到进度条节点，然后获取当前的旋转角度，并计算下一个旋转角度，最后更新进度条节点的transform样式。

在最后一行，我们调用setTimeout函数，让rotate函数每50毫秒执行一次，从而实现圆形进度条转动的效果。

3.2 实现轮播图自动播放

我们可以使用任务定时器来实现一个轮播图自动播放的功能。

<div class="slider">
  <div class="slider-item active"><img src="./1.jpg" alt=""></div>
  <div class="slider-item"><img src="./2.jpg" alt=""></div>
  <div class="slider-item"><img src="./3.jpg" alt=""></div>
  <div class="slider-item"><img src="./4.jpg" alt=""></div>
</div>

.slider {
  width: 320px;
  height: 240px;
  overflow: hidden;
  position: relative;
}

.slider-item {
  width: 320px;
  height: 240px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s ease;

  &.active {
    z-index: 1;
    opacity: 1;
  }

  & + .slider-item {
    left: 100%;
  }
}

let index = 0;
let timer = null;

function start() {
  timer = setInterval(() => {
    const prevIndex = index;

    index++;
    if (index >= 4) {
      index = 0;
    }

    const currItem = document.querySelector(`.slider-item:nth-child(${index + 1})`);
    const prevItem = document.querySelector(`.slider-item:nth-child(${prevIndex + 1})`);

    currItem.classList.add('active');
    prevItem.classList.remove('active');
  }, 2000);
}

function stop() {
  clearInterval(timer);
  timer = null;
}

start();

const slider = document.querySelector('.slider');
slider.addEventListener('mouseover', stop);
slider.addEventListener('mouseout', start);

上述代码中，我们定义了一个index变量来标记当前展示的轮播图的索引，以及一个timer变量来保存任务计时器的ID。

在页面初始化后，我们调用start函数，通过setInterval实现图片轮播的自动播放功能。在start函数内部，我们首先获取到上一个和下一个即将要展示的轮播图，然后通过给它们添加和删除.active类来切换图片。

在最后，我们通过mouseover和mouseout事件来停止和启动轮播图自动播放的功能。