Несколько лишних вызовов функций

Question

Есть вот такой сладер в нем слайды скрываюися с помощью значений opacity. Есть setTimeout который обеспечивает автоматическую смену слайдов. Но если я счелкаю по кнопкам то скрипт будто запускает несколько setTimeout и они через промежуток сработывают выбивая ритм. Не смотря на то что clearTimeout тоже есть

"use strict"

const dots = document.querySelectorAll('.dot'),
  slids = document.querySelectorAll('.slid'),
  dotbox = document.getElementById('dotBox'),
  durationTimeout = 10000,
  sliderBox = document.getElementById('sliderBox');

let autoChange,
  showSlid = 0;

for (let z = 1; z < 3; z++) {
  slids[z].style.opacity = "0";
}
slids[showSlid].style.opacity = "1";
dots[showSlid].style.background = "#40babd";

function sliderMechanism() {
  offTimeout();

  dots[showSlid].style.background = "rgba(255, 255, 255, 0.4)";
  slids[showSlid].style.opacity = "0";
  showSlid++;
  if (showSlid == slids.length) {
    showSlid = 0;
  }
  slids[showSlid].style.opacity = "1";
  dots[showSlid].style.background = "#40babd";

  onTimeout();
}

function dotPress(event) {
  let target = event.target.dataset.dotNumber; //
  if (target != undefined && showSlid != target) {
    offTimeout();
    dots[showSlid].style.background = "rgba(255, 255, 255, 0.4)";
    slids[showSlid].style.opacity = "0";
    showSlid = Number(target);
    slids[showSlid].style.opacity = "1";
    dots[showSlid].style.background = "#40babd";
    onTimeout();
  }
}

function offTimeout() {
  clearTimeout(autoChange);
}

function onTimeout() {
  autoChange = setTimeout(sliderMechanism, durationTimeout);
}

sliderBox.addEventListener('mouseover', offTimeout);
sliderBox.addEventListener('mouseout', onTimeout);

dotBox.addEventListener('click', dotPress);

autoChange = setTimeout(sliderMechanism, durationTimeout);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  max-width: calc(100vw - ((100vw - 100%)));
  overflow-x: hidden;
}

body {
  background: #2d3436;
  max-width: calc(100vw - ((100vw - 100%)));
}

.dotBox {
  display: flex;
  justify-content: center;
  z-index: 1;
  position: absolute;
  top: 510px;
  width: 100%;
}

.dot {
  background: rgba(255, 255, 255, 0.4);
  height: 11px;
  width: 11px;
  border-radius: 50%;
  margin: 5px;
}

.dot:hover {
  background-color: #40babd
}

.sliderBox {
  display: flex;
  justify-content: center;
}

.slider {
  position: relative;
}

.slid {
  width: 100vw;
  height: 560px;
  background-size: cover !important;
  background-position: center center !important;
  position: absolute;
  transition: ease 0.6s;
}

.slid:nth-child(1) {
  background: blue;
}

.slid:nth-child(2) {
  background: red;
}

.slid:nth-child(3) {
  background: green;
}

header {
  position: fixed;
  width: 100%;
  height: 30px;
  z-index: 2;
}

.inHeader {
  width: 1170px;
  margin: 0 auto;
}

h1 {
  color: white;
  weight: 900;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="assets/styles/stylesForNew.css">
  <title>Document</title>
</head>

<body>
  <header>
    <div class="inHeader">
      <div class="logo">
        <h1><img src="assets/images/logo-icon.svg" alt=""><strong>APP</strong>KIT</h1>
      </div>
    </div>
  </header>
  <div id="sliderBox">
    <div class="dotBox" id="dotBox">
      <div class="dot" data-dot-number="0"></div>
      <div class="dot" data-dot-number="1"></div>
      <div class="dot" data-dot-number="2"></div>
    </div>
    <div class="slider">
      <div class="slid">

      </div>
      <div class="slid"></div>
      <div class="slid"></div>
    </div>
  </div>
  <script src="assets/js/jsForNew.js"></script>
</body>

</html>

Answer 1

костыль от нефронтэндера:

по клику на кнопку также выставлять некий глобальный флаг: window.sliderWasSwitchedManually = true
в начало setTimeout добавить условие if(window.sliderWasSwitchedManually) {window.sliderWasSwitchedManually = false; return;}

Answer 2

function onTimeout() {
    offTimeout(); // !!!
    autoChange = setTimeout(sliderMechanism, durationTimeout);
}

Плюс - тогда можно убрать вызовы offTimeout из sliderMechanism и dotPress.

БЛОГ НА HUSL

Несколько лишних вызовов функций

Ответы (2 шт):