主页 / 问题 / 1256007
Accepted
Krovorgen
Asked:2022-03-15 15:36:01 +0000 UTC2022-03-15 15:36:01 +0000 UTC

单击块时如何延迟调用函数

  • 772

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 秒，当它处于活动状态时，随后单击跨度不会复制其内部。提前致谢

javascript

3 个回答

  1. Best Answer

    只需添加一个检查以查看 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 );
                });
            }
        }

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

    用jquery检查

    • 0 

  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>

    • 0

相关问题