Как вызывать функцию с задержкой при клике по блоку

Question

setAutoCopyFeatures()
    function setAutoCopyFeatures() {
        onclick_copySelf();

        function onclick_copySelf() {
            let copy = document.querySelectorAll('.test__promo');
            for( let i = 0; i < copy.length; i++ ) {
                copy[i].addEventListener('click', function() {
                    copyToClipboard( this.textContent );
                    ui_copyDone( this );
                });
            }
        }

        function copyToClipboard(str) {
            let area = document.createElement('textarea');
            document.body.appendChild(area);
            area.value = str;
            area.select();
            document.execCommand("copy");
            document.body.removeChild(area);
        }

        function ui_copyDone(btn) {
            let contentSaved = btn.innerHTML;
            btn.innerHTML = 'Скопировано';
            btn.classList.add('test__promo--copied');

            setTimeout(function() {
                btn.innerHTML = contentSaved;
                btn.classList.remove('test__promo--copied');
            }, 3000);
        }
    }

<span class="test__promo">157321</span>

Есть функция, которая при клике копирует содержимое span в буфер обмена и в течении 3 секунд выводит сообщение "скопировано", но если кликнуть более 1 раза, то копируется уже сообщение "скопировано". Подскажите, как можно сделать задержку, чтобы сообщение "скопировано" которое выводится в течении 3 секунд, при его активности последующие клики по span не копировали его внутренности. Заранее благодарен

Answer 1

if(!$(".test__promo").hasClass("test__promo--copied")) {
    copyToClipboard( this.textContent );
    ui_copyDone( this );
}

Сделал проверку через jquery

Answer 2

Просто добавьте проверку наличия класса test__promo--copied. Если он есть, то не запускаем повторное копирование.

if(this.classList.contains('test__promo--copied')) return;

Функция onclick_copySelf будет выглядеть так:

function onclick_copySelf() {
            let copy = document.querySelectorAll('.test__promo');
            for( let i = 0; i < copy.length; i++ ) {
                copy[i].addEventListener('click', function() {
                    if(this.classList.contains('test__promo--copied')) return;
                    copyToClipboard( this.textContent );
                    ui_copyDone( this );
                });
            }
        }

Answer 3

const p = document.querySelector("p");

const copy = ({target})=>{
   const value = target.innerText;
   target.removeEventListener("click",copy);
   target.innerText = "Copied";
   navigator.clipboard.writeText(value);
   setTimeout(()=>{
      target.innerText = value;
      target.addEventListener("click",copy);
   },3000)
}

p.addEventListener("click",copy)

<p>Name</p>

БЛОГ НА HUSL

Как вызывать функцию с задержкой при клике по блоку

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