Question

你能帮我理解为什么这个setTimeout逻辑不起作用

任务很简单，当用户点击按钮时，将执行复制输入文本的功能，然后将打印一条消息，说明副本成功，然后等待一秒钟并隐藏消息。最后一部分不起作用。

我分享了一个堆栈代码

＆＃13;

(function() {
    const copyText = document.querySelector('#email');
    const copyButton = document.querySelector('#copy');
    const messageBox = document.querySelector('#message');

    function copy() {
        copyText.select();
        document.execCommand('Copy');

        displayMessage();
    }

    function displayMessage() {
        messageBox.innerHTML = 'Email copied';

        clearMessage();
    }

    function clearMessage() {
        const timeoutID = window.setTimeout(() => {
            messageBox.innerHTML = '';
        }, 1000);

        window.clearTimeout(timeoutID);
    }

    copyButton.addEventListener('click', copy);
})();

＆＃13;

<input type="text" id="email" value="some.user@domain.com">
<button id="copy">Copy</button>
<span id="message"></span>

＆＃13;

感谢您的时间

Answer 1

您使用window.clearTimeout(timeoutID);设置后立即清除超时。只需删除window.clearTimeout(timeoutID);即可。

除非您要取消超时并保持其回调不被调用，否则无需使用clearTimeout。

Answer 2

清除函数内部的超时 -

function clearMessage() {
        const timeoutID = window.setTimeout(() => {
            messageBox.innerHTML = '';
            window.clearTimeout(timeoutID); // place it here
        }, 1000);

    }

因此，一秒钟之后，您的不必要的超时将被清除。

Answer 3

声明后立即清除计时器。删除window.clearTimeout（）调用，它将起作用

Answer 4

在超时功能结束时使用window.clearTimeout(timeoutID);因为setTimeout是异步

(function() {
    const copyText = document.querySelector('#email');
    const copyButton = document.querySelector('#copy');
    const messageBox = document.querySelector('#message');

    function copy() {
        copyText.select();
        document.execCommand('Copy');

        displayMessage();
    }

    function displayMessage() {
        messageBox.innerHTML = 'Email copied';

        clearMessage();
    }

    function clearMessage() {
        const timeoutID = window.setTimeout(() => {
            messageBox.innerHTML = '';
            window.clearTimeout(timeoutID);
        }, 1000);

        
    }

    copyButton.addEventListener('click', copy);
})();

<input type="text" id="email" value="some.user@domain.com">
<button id="copy">Copy</button>
<span id="message"></span>

不调用setTimeout逻辑

4 个答案: