如何编写一个接受回调作为参数的 jquery 函数

Posted

技术标签:

【中文标题】如何编写一个接受回调作为参数的 jquery 函数【英文标题】:How do I write a jquery function that accepts a callback as a parameter 【发布时间】:2010-11-05 02:59:05 【问题描述】:

我有以下功能。

function ChangeDasPanel(controllerPath, postParams) 

    $.post(controllerPath, postParams, function(returnValue) 

        $('#DasSpace').hide("slide",  direction: "right" , 1000, function() 

            $('#DasSpace').contents().remove();

            $('#DasSpace').append(returnValue).css("display", "block");

            $('#DasSpace').show("slide",  direction: "right" , 1000);

        );

    );

;

但我希望能够这样称呼它

ChangeDasPanel("../Home/Test",  ,function ()
  //do some stuff on callback

如何在我的函数中实现对回调的支持?

【问题讨论】:

【参考方案1】:
function ChangeDasPanel(controllerPath, postParams, f) 
  $.get(
    controllerPath, 
    postParams, 
    function(returnValue) 
      var $DasSpace = $('#DasSpace');
      $DasSpace.hide(
        "slide",  direction: "right" , 1000, 
        function() 
          $DasSpace.contents().remove();
          $DasSpace.append(returnValue).css("display", "block");
          $DasSpace.show("slide",  direction: "right" , 1000);
        
      );
      if (typeof f == "function") f(); else alert('meh');
    
  );
;

您可以像 javascript 中的任何其他对象一样传递函数。传入回调函数很简单,您甚至可以在 $.post() 调用中自己完成。

您可以决定是将回调作为$.post() 回调的一部分调用还是单独调用。

【讨论】:

这正是我过去 30 分钟一直在尝试做的事情。谢谢!帮了我 感谢“if (typeof f == "function") f();”部分。我一直在找那个!【参考方案2】:

如果我理解正确的话,就像设置另一个参数并将变量作为函数调用一样简单:

function foo(mycallback) 
    mycallback();

【讨论】:

【参考方案3】:

为什么不使用可以传递给函数的对象。它更像 jQuery,它为您节省了 x 个难以维护的命名参数,因为当您超过 3 个参数时它会变得笨拙。

例如

function callingFunction()

      var fnSettings: 
        url: someUrl,
        data: params,
        callback : function()
      ;


      yourFunction( fnSettings );



function yourFunction( settings ) 

      $.post( settings.url, settings.data, settings.callback );


【讨论】:

这绝对是最干净的答案(我写了类似的东西,所以我可能有偏见)【参考方案4】:

你知道全局变量和函数是邪恶的,所以为什么不把你的放​​到 jQuery 命名空间中:

$.extend(
  myFunc : function(someArg, callbackFnk)
    var url = "http://example.com?q=" + someArg;
    $.getJSON(url, function(data)

      // now we are calling our own callback function
      if(typeof callbackFnk == 'function')
        callbackFnk.call(this, data);
      

    );
  
);

$.myFunc(args, function()
  // now my function is not hardcoded
  // in the plugin itself
);

阅读这篇文章以获得更好的理解:Creating callback functions in jQuery

【讨论】:

酷。我怎样才能像在 Jquery 本身 $.hide(555, function())) 中一样创建匿名函数?还是 callbackFnk 是答案? 是的,callbackFnk 只是一个局部变量。正如您在示例中看到的,我们传递了一个匿名函数:$.myFunc(args, function()) 再次感谢!还有一个问题,主函数完成后会触发吗? 不,它将在主函数中触发(在myFunc 调用中)。

以上是关于如何编写一个接受回调作为参数的 jquery 函数的主要内容,如果未能解决你的问题,请参考以下文章

如何向函数回调添加额外参数

动态jQuery UI对话框回调函数问题

设计一个函数,它接受不定数量的参数,这是参数都是函数。这些函数都接受一个回调函数作为参数,按照回调函数被调用的顺序返回函数名

如何在 Flutter 小部件中测试回调函数

接受函数的回调作为参数

如何通过原始指针将闭包作为参数传递给 C 函数?