如何在焦点和单击事件触发时仅运行一次函数

Question

我有一个输入元素,附加了2个事件:焦点和单击.他们都启动了相同的辅助功能.

当我选择输入时,焦点事件触发,我的助手运行一次.没有问题.

当元素已经有焦点,然后我再次点击它时,click事件将触发,我的助手将运行一次.那里也没问题.

但是当元素没有焦点时,我点击它,两个事件都会触发,我的助手会运行TWICE.如何让这个助手只运行一次？

我在这里看到了几个类似的问题,但并没有真正按照他们的答案.我还发现了.live jQuery处理程序,如果我让它看一个状态类,它似乎可以工作.但似乎应该有一个更简单的方法..one处理程序可以工作,除了我需要多次工作.

谢谢你的帮助!

Answer 1

这里最好的答案是想出一个设计,它不是试图在两个不同的事件上触发相同的动作,这两个事件都可以在同一个用户动作上发生,但是因为你还没有真正解释整体问题你是编码,我们无法真正帮助您采用这种方法.

一种方法是从触发同样的事情两次保持一个单一的事件是"反跳"的函数调用,只有从一个给定的元素调用函数,如果它没有被称为最近(例如可能来自同一用户事件).您可以通过记录此元素的最后一次触发的时间来执行此操作,并且仅在时间长于某个值时调用该函数.

这是你可以做到的一种方式:

function debounceMyFunction() {
    var now = new Date().getTime();
    var prevTime = $(this).data("prevActionTime");
    $(this).data("prevActionTime", now);
    // only call my function if we haven't just called it (within the last second)
    if (!prevTime || now - prevTime > 1000) {
        callMyFunction();
    }
}

$(elem).focus(debounceMyFunction).click(debounceMyFunction);