Question

我想在最后一次停止后再停止一个函数5秒钟。

这就是我所拥有的：

return {
    buildUI: function() {
        el.nav.on({
            mouseenter: function() {
                el.logo.addClass('spin');
            },
            mouseleave: function() {
                el.logo.removeClass('spin');
            }
        });
    }
}

在mouseenter上，添加类以旋转徽标。在mouseleave上，删除该类。但是为了阻止徽标旋转到每个鼠标中心，我想要从最后一次添加5秒禁令。

这是我尝试过的，其他尝试：

var flipLogoTimer;
return {
    el.nav.on({
        mouseenter: function() {
            if (!flipLogoTimer) {
                el.logo.removeClass('spin').addClass('spin');
            }
        },
        mouseleave: function() {
            el.logo.removeClass('spin');
            flipLogoTimer = setTimeout(function() {
                //
            }, 5000);
        }
    });
}

我尝试在mouseleave事件中添加一个5秒计时器，因此下一个mouseenter可以检查计时器是否仍在运行以确定是否再次运行动画。

我哪里出错了，有更好的方法吗？这是一个很难搜索的问题，因为有很多关于在计时器上运行函数的问题。

Answer 1

您可以使用

之类的标志

return {
    buildUI: function () {
        var flag = false;
        el.nav.on({
            mouseenter: function () {
                if (flag) {
                    return;
                }
                el.logo.addClass('spin');
            },
            mouseleave: function () {
                if (flag) {
                    return;
                }
                flag = true;
                el.logo.removeClass('spin');
                setTimeout(function () {
                    flag = false;
                }, 5000)
            }
        });
    }
}

Answer 2

您可以通过切换flipLogoTimer

的值来尝试这样的事情

var flipLogoTimer=false;
return {
    el.nav.on({
        mouseenter: function() {
            if (!flipLogoTimer) {
                el.logo.removeClass('spin').addClass('spin');
            }
        },
        mouseleave: function() {
            el.logo.removeClass('spin');
            flipLogoTimer=true;
            setTimeout(function() {
                 flipLogoTimer=false;
            }, 5000);
        }
    });
}

Answer 3

您可以使用时间戳。想法：您在上次添加/删除课程时修复，并将其与当前日期进行比较。

// 5000 - equal to 5 seconds
function checkTimestamp(a, b){
  return Math.abs(a - b) < 5000;
}
return {
    buildUI: function () {
        var lastTimeStamp = null;
        el.nav.on({
            mouseenter: function () {
                if(lastTimeStamp && checkTimestamp(lastTimeStamp, Date.now())
                  return false;
                el.logo.addClass('spin');
                lastTimeStamp = Date.now();
            },
            mouseleave: function () {
                if(lastTimeStamp && checkTimestamp(lastTimeStamp, Date.now())
                  return false;
                el.logo.removeClass('spin');
                lastTimeStamp = Date.now();
            }
        });
    }
}

运行一次功能，然后禁止进一步呼叫5秒钟

3 个答案: