如果单击按钮，是否取消 SetTimeout 函数？

Question

我有一个 setTimeout 功能，它基本上设置了一个计时器来显示 AJAX 消息，并且消息是否是警报成功它重定向到某个页面，如果消息不是它保留在当前表单页面上的成功消息。

现在，在显示的 AJAX 消息中，我有一个关闭按钮，如果单击该按钮，则会根据消息是否成功警报进行相同的重定向。我不希望用户在选择单击消息中的 X 按钮时必须等待超时。

let timer;
let ajax_msgs_div = document.getElementById('ajax_messages');
function displayMessages(alert_class, message) {
    let ajax_msg = `<div class="alert alert-dismissible ${alert_class}" role="alert">
                        <button type="button" class="close" data-dismiss="alert"></button>
                          <span>${message}</span>
                  </div>`


    timer = window.setTimeout(function() {
        let close_btn = document.getElementsByClassName('close')[0];
        if (alert_class == 'alert-success'){
            close_btn.click(location.href="{{ django redirect url on success}")
        } else {
            close_btn.click();}
        }, 3500);

    ajax_msgs_div.innerHTML += ajax_msg;
}

现在设置的超时工作正常，但我希望用户能够自己单击关闭按钮，而不必等待计时器，如果他们选择的话。

编辑

多亏了 Doan 的回复，我现在可以正常工作了！有什么减少冗余的技巧吗？我尝试将关闭按钮设置为全局 var

一次

let close_button = document.getElementsByClassName('close')[0];

但只是执行超时功能。所以我不得不再次抓住按钮以使用 AddEventListener 功能。

let timer;
let ajax_msgs_div = document.getElementById('ajax_messages');
function displayMessages(alert_class, message) {
    let ajax_msg = `<div class="alert alert-dismissible ${alert_class}" role="alert">
                        <button type="button" class="close" data-dismiss="alert"></button>
                          <span>${message}</span>
                  </div>`


    timer = window.setTimeout(function() {
        let close_btn = document.getElementsByClassName('close')[0];
        if (alert_class == 'alert-success'){
            close_btn.click(location.href="{{ django redirect url on success}")
        } else {
            close_btn.click();}
        }, 3500);

    ajax_msgs_div.innerHTML += ajax_msg;

    let close_button =  document.getElementsByClassName('close')[0];
    close_button.addEventListener("click", () => {
        clearTimeout(timer);
        if (alert_class == 'alert-success'){
        location.href = {{ django redirect url on success }};
        } else {
            close_button.click();
        }
    });
}

Answer 1

可以通过clearTimeout(timer);设置点击事件清除setTimeout，直接调用location.href

    function redirect_func(){
        if (alert_class == 'alert-success'){
            location.href = {{ django redirect url on success }};
        } else {
            close_button.click();
        }
    }

    timer = window.setTimeout(redirect_func, 3500);

    ajax_msgs_div.innerHTML += ajax_msg;

    let close_button =  document.getElementsByClassName('close')[0];
    close_button.addEventListener("click", () => {
        clearTimeout(timer);
        redirect_func();
    });

如果单击按钮，是否取消 SetTimeout 函数？

Cancel SetTimeout function if a button is clicked?

javascript

ajax

settimeout

编辑