javascript - 3秒钟后在鼠标悬停启用按钮上，在鼠标关闭时禁用并停止倒计时

我有一个执行不可逆操作的按钮，除非用户将鼠标悬停在其上3秒钟，否则我将尝试在其上设置锁定。如果他们等待3秒钟，该按钮将变为启用状态。一旦他们将鼠标移开，它将再次禁用。如果他们还在3秒钟的倒计时期间将鼠标移开，则它将停止倒计时。

    $('#delete_btn').on('mouseover', function () {
        setTimeout(function () {
            $('#delete_btn').prop('disabled', false)
        }, 3000)
    })

    $('#delete_btn').on('mouseout', function () {
            $('#delete_btn').prop('disabled', true)
    })

我不确定如果他们早点将鼠标移开，如何停止倒计时

最佳答案

您需要清除超时。因此，可以在下一个调用时触发：

    var timeout;

    $('#delete_btn').on('mouseover', function() {
        timeout = setTimeout(function() {
            $('#delete_btn').prop('disabled', false);
        }, 3000);
    });

    $('#delete_btn').on('mouseout', function() {
        clearTimeout(timeout);
        $('#delete_btn').prop('disabled', true);
    });

在CodePen的工作中看到它：

https://codepen.io/aminshahrokhi/pen/VNJBYZ