3秒后鼠标悬停启用按钮，鼠标关闭禁用并停止倒计时答案

【问题标题】：On mouse over enable button after 3 seconds, on mouse off disable and stop count down3秒后鼠标悬停启用按钮，鼠标关闭禁用并停止倒计时
【发布时间】：2019-05-02 02:00:37
【问题描述】：

我有一个按钮，它做了一些不可逆转的事情，我试图锁定它，除非用户将鼠标悬停在它上面 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)
    })

如果他们提前鼠标退出，我不确定如何停止倒计时

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您需要清除超时。因此，它已准备好在下一次调用时触发：

    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

【讨论】：

【解决方案2】：

这是来自 W3School 的复制粘贴，基本上您必须将超时“保存”到 var 中，然后在悬停时清除超时：

var myVar;

function myFunction() {
  myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}

function myStopFunction() {
  clearTimeout(myVar);
}

我希望这会有所帮助:)

【讨论】：