¿Cómo escribo una función jquery que acepta una devolución de llamada como parámetro?

2 minutos de lectura

Tengo la siguiente función.

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);

        });

    });

};

Pero quiero poder llamarlo así

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

¿Cómo puedo implementar soporte para callbacks en mi función?

avatar de usuario
Tomalak

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');
    }
  );
};

Puede pasar funciones como cualquier otro objeto en JavaScript. Pasar una función de devolución de llamada es sencillo, incluso lo hace usted mismo en el $.post() llamar.

Puede decidir si desea que le devuelvan la llamada como parte de la $.post() devolución de llamada o por sí solo.

  • exactamente lo que he estado tratando de hacer durante los últimos 30 minutos. ¡Gracias! me ayudó

    – Sean Cámaras

    7 de febrero de 2010 a las 14:12

  • Gracias por el “si (tipo de f == “función”) f();” parte. ¡He estado buscando eso!

    – Garavani

    31 de mayo de 2015 a las 9:30


avatar de usuario
uzbeko

Usted sabe que las variables y funciones globales son malas, así que ¿por qué no poner las suyas en el espacio de nombres de 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
});

Lea esta publicación para obtener una mejor comprensión: Creación de funciones de devolución de llamada en jQuery

  • Enfriar. ¿Cómo puedo crear una función anónima como en Jquery? $.hide(555, function()){}) ?? ¿O callbackFnk es la respuesta?

    – aleXela

    25/09/2013 a las 20:09


  • Sí, callbackFnk es solo una variable local. Como puede ver en el ejemplo, estamos pasando una función anónima: $.myFunc(args, function(){}).

    – uzbeko

    25/09/2013 a las 20:57


  • ¡Gracias una vez más! Una pregunta más, ¿se activará después de que finalice la función principal?

    – aleXela

    26 de septiembre de 2013 a las 11:48

  • No, se disparará dentro de la función principal (dentro del myFunc llamar).

    – uzbeko

    30 de septiembre de 2013 a las 7:04

Si te entiendo bien, es tan fácil como configurar otro parámetro y llamar a la variable como una función:

function foo(mycallback) {
    mycallback();
}

¿Por qué no usa un objeto que puede pasar a la función? Es mucho más parecido a jQuery y le ahorra tener x parámetros con nombre que es difícil de mantener, ya que puede volverse difícil de manejar cuando supera los 3 parámetros.

p.ej

function callingFunction(){

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


      yourFunction( fnSettings );

}

function yourFunction( settings ) {

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

}

¿Ha sido útil esta solución?