如何知道何时触发 JQuery 函数？

Posted 2023-05-09

【中文标题】如何知道何时触发 JQuery 函数？

【英文标题】：How to know when a JQuery function is fired?

【发布时间】：2013-09-22 21:00:34

【问题描述】：

我创建了两个 JQuery 插件：_formValidator.validate() 和 refreshTime 在插件_formValidator.validate()。我有一个生成错误消息的函数，名称为buildError， 我在一个按钮点击中调用这两个插件。

我想知道插件_formValidator.validate()中的buildError函数是否被触发，插件refreshTime没有触发。

我的代码是：

 $(document).ready(function () 
     $("#submitchangepassword").click(function () 
         _formValidator.validate();
         refreshTime( target: this );
     );
 );

buildError功能码：

function buildError( config ) 
    var error = $('<div name="formError" id="formError' + config.controlToValidate.replace('#', '') + '" class="form-error-holder"><div class="form-error-icon"></div><div class="form-error"><span class="form-error">' + config.errormessage + '</span></div><div class="clear"></div></div>');
    error.hide();
    error.insertAfter( config.insertAfterControl );
    error.show('fast');

【问题讨论】：

在你的函数中添加console.log语句，看看它们是否被执行。

谢谢，我想检查一下这个是否被触发，例如：if(is fire) refreshTime( target: this )

当相关事件触发时，只需在全局变量中设置一个标志/值。每个事件一个标志可以让你做任何你想做的事情。

@HiTechMagic 谢谢你的回答，但是可以用代码给我看吗？

添加示例...如果您需要进一步帮助，请告诉我。

【参考方案1】：

有多种方法可以检查。最简单的方法是添加console.log，比如

$("#submitchangepassword").click(function () 
    console.log("submit password clicked!");
    _formValidator.validate();
    refreshTime( target: this );
);

或者您可以添加警报：

$("#submitchangepassword").click(function () 
   alert("submit password clicked!");
    _formValidator.validate();
    refreshTime( target: this );
);

...就个人而言，我更喜欢console.log 方法。您可以通过打开开发者的控制台来检查 Firefox 或 chrome 中的控制台输出。

[编辑] 我明白我误解了这个问题

您需要设置一个变量来执行此操作。因此，如果发生错误，您将一个全局变量（我们称之为anErrorOccured）设置为true。那你就可以了

$("#submitchangepassword").click(function () 
    _formValidator.validate();
    if(!anErrorOccured)
        refreshTime( target: this );
    
);

另一种可能的方法是实现回调：

$("#submitchangepassword").click(function () 
    var self = this;
    _formValidator.validate(
        onSuccess:function()
            refreshTime( target: self );
        ,
        onError:function()
            alert("an error occured");
        
    );
);

使用_formValidator 函数执行以下操作：

_formValidator(o)
     //check validity

     if(isValid)
         if(o.onSuccess != undefined)
              o.onSuccess();
         
      else 
         if(o.onError != undefined)
              o.onError();
         
     

【讨论】：

感谢您的回答，但我认为您没有正确理解我的目的，基于您的回答我想这样做：$("#submitchangepassword").click(function () _formValidator.validate(); if(_formValidator.validate(buildError) is Notfired) refreshTime( target: this ); );实际上，我想使用 _formValidator.validate() 之后，我检查 buildError 函数 (_formValidator.validate()) 是否被触发 refreshTime 插件不会触发。

如果有并行操作正在运行，使用变量的选项会不太好

【参考方案2】：

通过我的评论，我的意思是这样的：

var buildErrorFired = false;  // This is declared as a global

 $(document).ready(function () 
     $("#submitchangepassword").click(function () 
         if (!buildErrorFired)
             _formValidator.validate();
             refreshTime( target: this );
         
     );
 );

function buildError( config ) 
    buildErrorFired = true;
    var error = $('<div name="formError" id="formError' + config.controlToValidate.replace('#', '') + '" class="form-error-holder"><div class="form-error-icon"></div><div class="form-error"><span class="form-error">' + config.errormessage + '</span></div><div class="clear"></div></div>');
    error.hide();
    error.insertAfter( config.insertAfterControl );
    error.show('fast');

我不太了解您的项目，无法建议 buildErrorFired = false; 重置可能的去向。