Код работает с задержкой, либо не срабатывает и вовсе

Question

Код работает с задержкой, либо не срабатывает и вовсе

Рейтинг: 0Ответов: 2Опубликовано: 31.07.2023

в HTML есть 2 кнопки и контейнер с значением opacity 0, по нажатию на одну кнопку значение opacity для контейнера плавно меняется с 0 до 1, при нажатии на вторую, напротив с 1 до 0. написал такой код, работает, но после 1 раза начинает срабатывать спустя какое-то время, либо не срабатывает и вовсе, помогите разобраться.

const titleAll = document.getElementById('titleAll') //контейнер
let opacityValue = 0
function opacity(){   //функция по нажатию на 1 кнопку
  let int = setInterval(op, 50 )
  function op(){
    if(opacityValue == 1){
      clearInterval(int);
    }else{
      titleAll.style.opacity = opacityValue += 0.1;
    }

  }
}
function opacity1(){ //функция по нажатию на 2 кнопку
  let int1 = setInterval(op1, 50 )
  function op1(){

    if(opacityValue == 0){
      clearInterval(int1);
    }else{
      titleAll.style.opacity = opacityValue -= 0.1;
    }

  }
}

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Первая функция

function op() {
  titleAll.style.opacity = opacityValue += 0.1;
  if (Math.floor(opacityValue) == 1) {
    clearInterval(int);
  }
}

И вторая функция

function op1() {
  titleAll.style.opacity = opacityValue -= 0.1;
  if (Math.ceil(opacityValue) == 0) {
    clearInterval(int1);
  }
}

Весь мой код

  const titleAll = document.getElementById("titleAll"); //контейнер
  let one = document.getElementById("o");
  let two = document.getElementById("t");
  let opacityValue = 0;
  // clearInterval(int)
  one.addEventListener("click", () => {
    //функция по нажатию на 1 кнопку
    let int = setInterval(op, 50);
    function op() {
      titleAll.style.opacity = opacityValue += 0.1;
      if (Math.floor(opacityValue) == 1) {
        clearInterval(int);
      }
    }
  });

  two.addEventListener("click", () => {
    //функция по нажатию на 2 кнопку
    let int1 = setInterval(op1, 50);
    function op1() {
      titleAll.style.opacity = opacityValue -= 0.1;
      if (Math.ceil(opacityValue) == 0) {
        clearInterval(int1);
      }
    }
  });

Answer 2

▲ 1

Математитка в JS не совсем такая, как вы ожидаете. Выведите, например, в консоль, сколько будет 0.1 + 0.2 и вы очень удивитесь. А значит и ваши условия не сработают.

Или используйте оптимизированный код из ответа Venom, или можно доработать ваш код так:

const titleAll = document.getElementById("titleAll"); //контейнер
let opacityValue = 0;
function opacity() {
  //функция по нажатию на 1 кнопку
  let int = setInterval(op, 50);
  function op() {
    if (opacityValue >= 1) {
      clearInterval(int);
    } else {
      titleAll.style.opacity = opacityValue;
      opacityValue += 0.1
    }
  }
}
function opacity1() {
  //функция по нажатию на 2 кнопку
  let int1 = setInterval(op1, 50);
  function op1() {
    if (opacityValue <= 0) {
      clearInterval(int1);
    } else {
      titleAll.style.opacity = opacityValue;
      opacityValue -= 0.1
    }
  }
}

document.getElementById('b1').addEventListener('click', opacity)
document.getElementById('b2').addEventListener('click', opacity1)

#titleAll {
  width: 300px;
  height: 100px;
  background-color: #ccc;
  opacity: 0;
}

<button id="b1">1</button>
<button id="b2">2</button>
<div id="titleAll"></div>

Код работает с задержкой, либо не срабатывает и вовсе

Ответы