【JS实用技巧篇】02-无缝轮播图中的计时器

CSDN话题挑战赛第2期 参赛话题：学习笔记

📖JavaScript专栏：📑js实用技巧篇 👊👊👊该专栏博主会持续更新，目的是给大家分享一些常用实用技巧，同时巩固自己的基础，共同进步✨✨✨ 💡💡💡欢迎大家在评论区留言交流技术以及学习方法、心得方面的问题。💡💡💡 👇🏻👇🏻👇🏻你的一键三连是对我的最大支持❤️❤️❤️ 🌟🌟🌟祝大家国庆快乐！！！🌟🌟🌟

文章目录

• 📑前言
• 📑正文
  • 📃无缝轮播图
  • 📃计时器
• 📑总结

📑前言

本篇主要讲解js中经常用到的计时器，博主将它和轮播图应用场景结合展现

📑正文

📃无缝轮播图

下面展示的是经常能在网页上看到的轮播图效果（博主js学习阶段实现的一个小案例，望不要吐槽🙏🙏🙏）：

在这里插入图片描述

由上我们可以观察到轮播图会自动向右切换，也可手动切换，其次当切换到最后一张图片时，再往右切换则会转至第一张，而向左一直切换则会转至最后一张，且转换过程很流畅，前后感觉就紧挨在一起似的，这就是无缝轮播图。其实现方式这里就不展示了，回到我们的主题——计时器，细心的小伙伴可能已经发现当鼠标移动到图片内，将会停止自动切换，而鼠标离开则会继续切换。这就是我们今天所要讲解的计时器。

📃计时器

计时器实现：

 let timerId;//声明一个计时器ID
function start() {
  let duration = 1000;
  if (timerId) return;
  timerId = setInterval(() => {}, duration);
}
function stop() {
  clearInterval(timerId);
  timerId = null;
}

其原理很简单，封装了两个函数，一个是重新开始的函数，一个是暂停函数。需要注意的是timerId的声明需要写在两个函数之外。另外，还需注意timerId值的清除，即timerId=null;不可省略，否则下次调用start()，即使计时器已经关闭，但timerId仍有值，就无法开启一个新的计时器，setInterval()中传的函数就无法执行。

下面通过一个简单演示来加深我们对其原理理解：

在这里插入图片描述

实现代码：

在这里插入图片描述

📑总结

​本篇内容可能不是很严谨🙏🙏🙏，主要目的是想给大家分享一个在轮播图应用场景下的一个小技巧，希望对大家有所帮助😉😉😉