不调用setTimeout逻辑

Question

你能帮我理解为什么这个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 = '';
        }, 1000);

        window.clearTimeout(timeoutID);
    }

    copyButton.addEventListener('click', copy);
})();

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

谢谢你的时间

Answer 1

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

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