Question

我在HTML中有一部分DIV元素，它们是一组卡片。 onmouseenter，视您所在的卡片而定，它们会以动画的方式移开，以便查看下方的卡片（它们堆叠在彼此的顶部，并偏移以实际允许{{1} }。

问题是，如果我移动得太快，该函数将开始执行我快速移动的元素和鼠标当前所在的元素。这变成一个循环，卡片动画开始反复闪烁。

需要发生的是，如果我在某个元素上移动得太快并移至下一个，则实际上需要触发鼠标所在的元素，而不是我快速移动的元素。这是同时控制mouseenter和输入的功能：

onleave

此外，我只是将编码作为一种爱好而已，而不是在类中或任何东西上进行，因此，如果您发现有什么可以给我建议的，那就太好了！谢谢您的宝贵时间，非常感谢。

Answer 1

您需要检查lodash的Debounce或Throttle方法。而且，如果您不想使用Lodash，则需要实现防抖和抑制的概念。这是文档和说明

Debounce and Throttle using Javascript

Answer 2

Aa @SaurabhGhewari指出，您应该使用反跳或限制方法。我推荐Lodash，它是一个很棒的库，但是由于我看到您只使用javascript。

在本教程中：https://davidwalsh.name/javascript-debounce-function

尝试将此功能添加到您的代码中：

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

在您的代码中

var toggleCards = debounce(function(object) {
    // All the code from your function
}, 250);

根据需要更改时间参数。

如果再次调用该函数，如何停止执行该函数的第一次调用？

2 个答案: