javascript - Jquery 将函数传递给函数

Question

好的，我需要一些帮助，

我在 jquery 插件中有一个函数

var LoadPage = function (page, location, func){     
        $.ajax({
            url: page,
            success: function(data){        
                $(location).html(data); //Insert data into location
                func
                return true         
            },
        });
    }

我想这样使用它

 Loadpage(
     "api/page.php", 
     "#div_id", 
      $("#calander td.clickable").click(function() {
         var day = $(this).attr("calendar-day");
         console.log("clicked TD" + day);
         LoadPage('/api/view_event.php?d='+day, settings.eventContainer);
  })
 );

或

 Loadpage(
     "api/page.php", 
     "#div_id", 
      function() {
         var day = $(this).attr("calendar-day");
         console.log("clicked TD" + day);
         LoadPage('/api/php/calander/view_event.php?d='+day+'&m='+SelectedMonth+'&y='+SelectedYear, settings.eventContainer);
  }
 );

然后让它在 success: 中运行，其中 var func 位于其中，但不确定如何让它工作。请帮助互联网。

Answer 1

您的代码中存在三个单独的问题:

1) 如果您想在成功处理程序中执行回调函数 func，则需要在其后面添加括号 ()，如 func() 中所示 因为这是 javascript 的方法来表示您想要执行一个函数。

var LoadPage = function (page, location, func){     
    $.ajax({
        url: page,
        success: function(data){        
            $(location).html(data); //Insert data into location
            // add parens here after func
            func();
            return true         
        },
    });
}

如果您希望 func 参数是可选的，您可以在执行之前对其进行测试，如下所示:

var LoadPage = function (page, location, func){     
    $.ajax({
        url: page,
        success: function(data){        
            $(location).html(data); //Insert data into location
            // add parens here after func to actually execute it
            if (func) func();
            return true         
        },
    });
}

2) 然后，您需要更改调用 LoadPage() 的方式以向其传递实际的函数引用，如下所示:

Loadpage(
     "api/page.php", 
     "#div_id", 
      function() {
         $("#calander td.clickable").click(function() {
             var day = $(this).attr("calendar-day");
             console.log("clicked TD" + day);
             LoadPage('/api/view_event.php?d='+day, settings.eventContainer);
         })
      })
 );

您传递给它的是执行 .click 函数的结果，该函数是 jQuery 对象，而不是函数。相反，您可以将其包装在匿名函数中，以便传递对该函数的引用。这与 func() 相反。您不需要在传递的内容之后添加括号，因为您想要传递对函数的引用，而不是现在执行该函数的结果。

那么，总结一下这两个问题:

声明:

func

只是对函数的引用。它实际上并不执行该函数。当您想要传递对稍后调用它的函数的引用时，它非常有用。

声明:

func()

立即执行该函数。如果您将 func() 作为参数传递，那么它将立即执行(括号总是意味着现在执行它)，然后传递该函数的返回值(这不是您想要的)。

<小时/>

3) 您可能还想了解成功处理程序中的 return true 语句不执行任何操作。由于 ajax 函数是异步的，因此您的 LoadPage() 函数只是启动 ajax 函数，然后立即返回。一段时间后，ajax 引擎的内部调用您的成功处理程序。该 return 语句返回到该 ajax 引擎的内部。它不会从您的 LoadPage() 函数返回，因为该函数早已完成并且没有返回任何内容。

4) 可能的第四个问题。每次调用 LoadPage() 时，您都会向此选择器匹配的任何对象添加一个新的点击处理程序:"#calander td.clickable"。如果其中一些对象以前存在，您最终将得到多个单击处理程序。在这种情况下，您要么想要使用委托(delegate)事件处理，这样您就可以提前安装一次点击处理程序，要么您需要在安装新点击处理程序之前删除现有的点击处理程序，或者您只需要隔离新添加的点击处理程序对象并仅在它们上调用它。如果所有“#calander td.clickable”都被以前的代码替换，那么这将不是问题。