jquery 定义回调并立即触发一次的最佳方法是什么?

cczfrluj  于 2023-01-16  发布在  jQuery
关注(0)|答案(3)|浏览(143)

在jQuery中,我经常做这样的事情:

$('#myId').bind('myevent', function() { ... }).trigger('myevent');

当选择器只找到一个元素时效果很好,但如果有多个匹配,我不希望它多次触发。
有没有什么方法可以一次性声明一个匿名函数并执行它一次呢?
或者您必须使它成为非匿名的(给予它一个名称),传入它,然后手动调用它一次?
例如,我可能将一个.change事件绑定到一组单选按钮。在回调中,我检查实际设置了哪一个,然后显示/隐藏一个div。当页面加载时,div需要处于正确的状态,所以我触发一次事件,让JS判断是否应该显示它。但我真的不希望它触发3次,因为我有3个单选按钮。

6ojccjat

6ojccjat1#

使用triggerHandler()[docs]方法,而不是trigger()[docs]方法。
这将只调用处理程序一次,并且不允许事件冒泡或触发默认行为。

来自文档:

.triggerHandler()方法的行为与.trigger()类似,但有以下例外:

  • .triggerHandler()方法不会导致发生事件的默认行为(如表单提交)。
  • 虽然.trigger()将对jQuery对象匹配的所有元素进行操作,但.triggerHandler()只影响第一个匹配的元素。
  • 使用.triggerHandler()创建的事件不会向上冒泡DOM层次结构;如果目标元素不直接处理它们,则它们什么也不做。
  • triggerHandler()不返回jQuery对象(以允许链接),而是返回它导致执行的最后一个处理程序所返回的任何值。
beq87vna

beq87vna2#

如果唯一的问题是选择器匹配多个元素,则只需使用.first()

$('some selector').bind('myevent', function()
{
    // ...
}).first().trigger('myevent');

将其转换为jQuery插件非常简单,您可以像使用.bind()一样使用它:

$('some selector').bindTrigger('myevent', function () { ... });

插件代码(未测试)

;(function ($)
{
    $.fn.bindTrigger = function ()
    {
        this.bind.apply(this, arguments).first().trigger(arguments[0]);
    };
})(jQuery);
jaxagkaj

jaxagkaj3#

我可以想到两种方法来定义匿名函数并同时调用它。
第一种方法是使用arguments.callee值返回函数本身,并在该位置调用函数,下面的例子可能会更清楚:

el.bind('myevent', (function() {
  ...;
  return arguments.callee; // return the function
})());

第一种方法的问题是函数总是返回自身,另一种方法是用helper方法扩展Function.prototype,如下面的示例所示:

// extend the prototype once somewhere
Function.prototype.invoke = function(){
  this();      // invoke...
  return this; // and return the function
};

// invoke() on an anonymous function now calls the function
// and returns the function instead of the result.
el.bind('myevent', (function(){
  ...
}).invoke());

相关问题