主页 / 问题 / 1118849
Accepted
DarkRou
Asked:2020-05-02 00:47:06 +0000 UTC2020-05-02 00:47:06 +0000 UTC

如何将点击限制在特定时间JS

  • 772

有切换方块的按钮，有转场效果。而且我需要在单击后一段时间后才能单击此按钮。否则，会出现不必要的视觉错误。还有 2 个按钮，一个后退 ( prev)，一个前进 ( next)

next.addEventListener('click', function() {
    var activeBlock = document.querySelector('.content > .block.active');
    var nextBlock = activeBlock.nextElementSibling;

    if (nextBlock.classList.contains('block')) {
        nextBlock.classList.add('active', 'fadeIn');
        nextBlock.style.display = 'flex';
        setTimeout(function () {
        nextBlock.classList.remove('fadeIn');
            nextBlock.style.opacity = '1';
        }, 500);
    }
    else {
        firstBlock.classList.add('active', 'fadeIn');
        firstBlock.style.display = 'flex';
        setTimeout(function () {
            firstBlock.classList.remove('fadeIn');
            firstBlock.style.opacity = '1';
        }, 500);
    }

    activeBlock.classList.add('fadeOut');
    setTimeout(function () {
        activeBlock.classList.remove('fadeOut');
        activeBlock.classList.remove('active');
        activeBlock.style.opacity = '0';
        activeBlock.style.display = 'none';
    }, 500);
});
javascript

2 个回答

  1. Best Answer
    var timer = null;
next.addEventListener('click', function() {
  if (timer)
    return;

  ...
  timer = setTimeout(function () {
    timer = null;
    activeBlock.classList.remove('fadeOut');
    activeBlock.classList.remove('active');
    activeBlock.style.opacity = '0';
    activeBlock.style.display = 'none';
  }, 500);
});
    • 1 
  2. let isDisabled = false;

next.addEventListener('click', function(e) {
    if(isDisabled) {
        return;
    }

    isDisabled = true;

    var activeBlock = document.querySelector('.content > .block.active');
    var nextBlock = activeBlock.nextElementSibling;

    if (nextBlock.classList.contains('block')) {
        nextBlock.classList.add('active', 'fadeIn');
        nextBlock.style.display = 'flex';
        setTimeout(function () {
            nextBlock.classList.remove('fadeIn');
            nextBlock.style.opacity = '1';
            isDisabled = false;
        }, 500);
    }
    else {
        firstBlock.classList.add('active', 'fadeIn');
        firstBlock.style.display = 'flex';
        setTimeout(function () {
            firstBlock.classList.remove('fadeIn');
            firstBlock.style.opacity = '1';
            isDisabled = false;
        }, 500);
    }

    activeBlock.classList.add('fadeOut');
    setTimeout(function () {
        activeBlock.classList.remove('fadeOut');
        activeBlock.classList.remove('active');
        activeBlock.style.opacity = '0';
        activeBlock.style.display = 'none';
        isDisabled = false;
    }, 500);
});
    • 1

相关问题