интеграция функции SetTimeOut после нажатия кнопки - PullRequest
Новая
       7

интеграция функции SetTimeOut после нажатия кнопки

0 голосов
/ 24 апреля 2019

Я создал фрагмент кода, который меняет состояние с display: block на display: none с помощью элемента onClick.Моя цель - отложить изменение состояния на несколько секунд, пока не появится эффект анимации.

Этот фрагмент кода ниже - это то, что я сейчас использую, чтобы изменить состояние элемента, но не знаю, как включить задержку.

Любые советы или предложения с благодарностью.

Спасибо, Муравей 

function showDiv1(elem) {

  var divsToCheck = ["close","Holder"]; // Add to here to check more divs
  for (var i = 0; i < divsToCheck.length; i++) {
  if (divsToCheck[i] == elem) {
  document.getElementById(divsToCheck[i]).style.display = "block";
} else {
  document.getElementById(divsToCheck[i]).style.display = "none";
}
}
}

Ответы [ 3 ]

0 голосов
/ 24 апреля 2019

Вы должны вызвать функцию в вашем цикле, которая заботится о setTimeout и скрывает / показывает вместо вызова функции тайм-аута в цикле.(Не будет работать, потому что я больше не доступен).Смотрите здесь: https://jsbin.com/refodobaca/1/edit?html,css,js,output

function showDiv1(elem) {
  var divsToCheck = ["close","Holder"]; // Add to here to check more divs
  for (var i = 0; i < divsToCheck.length; i++) {
    if (divsToCheck[i] == elem) {
      showHideDiv(divsToCheck[i], true);
    } else {
      showHideDiv(divsToCheck[i], false);
    }
  }
}

function showHideDiv(elem, bShow) {

  var timeoutSeconds = 3;
  setTimeout(function() {
    document.getElementById(elem).style.display = (bShow ? "block" : "none");
  }, timeoutSeconds * 1000);

}
showDiv1('Holder');
0 голосов
/ 24 апреля 2019

Ваш вопрос немного неясен, потому что имя вашей функции - showDiv1, но вы объясняете, что пытаетесь скрыть элемент, поэтому я попытался ответить в свете этого и надеюсь, это даст вам некоторые идеи.

Этот код отображает пару делений. Если вы нажмете на них, они станут красными и через пару секунд (для представления анимации) они будут скрыты.

dummyAnim возвращает promise. После того, как анимация закончилась (здесь представлена ​​задержка в две секунды), она разрешается. Я использовал await, чтобы приостановить выполнение кода в функции async, пока анимация не разрешится. 

// Grab the elements and add click handlers to them
const divs = document.querySelectorAll('div');
divs.forEach(div => div.addEventListener('click', hideElement, false));

function dummyAnim() {

  // return a promise which resolves (an animation)
  // after two seconds
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(), 2000);
  });
}

async function hideElement() {
  this.classList.add('red');
  await dummyAnim();
  this.classList.add('hidden');
}
div { color: black; display: block }
.hidden { display: none }
.red { color: red }
<div>close</div>
<div>holder</div>
0 голосов
/ 24 апреля 2019

Поместите код, который вы хотите задержать, в анонимную функцию, например: 

function showDiv1(elem) {

  var divsToCheck = ["close","Holder"]; // Add to here to check more divs
  for (var i = 0; i < divsToCheck.length; i++) {
    if (divsToCheck[i] == elem) {
      setTimeout(function() {
         document.getElementById(divsToCheck[i]).style.display = "block";
      }, 500);
    } else {
      setTimeout(function() {
        document.getElementById(divsToCheck[i]).style.display = "none";
      }, 500);
    }
  }
}

Здесь 500 означает задержку на 500 мс. Вы можете изменить это на любое количество времени (в миллисекундах), которое вам нужно.

...