Question

我对jQuery有一种微弱的把握，但我正在尝试学习添加常规Javascript的基础知识。我想将一系列动画“保存”为函数，然后通过几个不同的点击事件调用该函数。最好的方法是什么？

简单示例代码：

$(document).ready(function() {

function animateCube() {
    $('.test').fadeOut();
    $('.test').delay(500).slideDown();
}

$('.test').click(function() {
// Play "animateCube"
});

$('.link').click(function() {
// Play "animateCube"
});

});

Answer 1

我会将该功能分配给var并将其引用为您事件的点击处理程序。

$(document).ready(function() {

  var animateCube = function() {
    $('.test').fadeOut();
    $('.test').delay(500).slideDown();
  }

  $('.test').click(animateCube);

  $('.link').click(animateCube);

});

如果你想执行一些额外的代码，我会将处理程序包装在一个匿名函数中。

$('.test').click(function(){
  // execute more code
  animateCube();
  // execute even more code
});

Answer 2

您可以按如下方式调用该函数：

$('.test').click(function() {
  animateCube();
});

Answer 3

您只需从点击处理程序中调用该函数即可。

$('.link').click(function() {
   animateCube();
});

Answer 4

$('.test, .link').click(function() {
  animateCube();
});

Answer 5

由于您正在尝试使用常规JS ，我认为最有趣的方法是使用命名回调：

$(document).ready(function()
{
    function animateCube(e)//can be declared outside ready CB, too
    {//jQuery passes the event object to the function
        $(this).fadeOut();//? fade only clicked element?
        $('.test').fadeOut();
        $('.test').delay(500).slideDown();
    }
    $('.link, .test').on('click',animateCube);
});

你需要知道的是函数是第一类对象，可以作为参数传递给另一个函数，就像你一直在jQuery（.click(function＆lt; ---）中一样。这就是为什么写.click(function() { anotherFunction();});恕我直言并没有意义。您正在创建一个辅助函数对象，将其传递给调用它的jQuery，它所做的就是调用您想要执行的函数。实际上，函数是在特定的上下文中调用的（$(this)），它是您可能想要使用的上下文。在它周围包装一个虚拟函数只是不加起来。如果你想要一些额外的东西添加到给定的函数，只需将它们视为它们的对象。它们可以是参数，函数的返回值，它们可以有属性，它们给出了一个原型（-chain），它们甚至可以同时被几个变量引用......考虑一下：

$(document).ready(//<-- open bracket: this is a function call
    function(){});//we're creating a function AND pass it as an argument

因此，我们调用的ready方法可能看起来像这样（它看起来比这复杂一点，但这不是重点）：

object.ready = function(functionArgument)
{
    //the function we passed looks like a variable now:
    console.log(typeof functionArgument);//"function"
    //ways this function can be called:
    functionArgument();
    functionArgument.call(this);//call in current context
    functionArgument.apply(object,[1,2,3]);//call as a method of object, and pass 3 arguments
    functionArgument.bind(window);//bind global context
    functionArgument();//call in bound context
};

JS中的函数是巧妙的东西，而且：它们也是对象，因此可以为它们分配属性，就像任何其他对象一样。在我们的例子中：

functionArgument.hasAProperty = functionArgument;
functionArgument = (function(originalFunction)//this was the original function
{
    return function()//<-- return a function, that will be assigned to our var
    {
         console.log('I used to be:');
         console.log(oringalFunction);
         console.log('Now I do even more! But did I loose my property?');
         console.log(typeof functionArgument.hasAproperty);//undefined
         console.log('Yes, but: ' + typeof originalFunction.hasAProperty + ' Not entirely!');
    };
})(functionArgument.hasAProperty);//passes a reference to itself

让我知道这是否对你有意义，这是未经测试的东西，但它遵循IIFE和闭包的基本原则。

Answer 6

试试这个：

$(document).ready(function() {
    function animateCube() {
        $('.test').fadeOut();
        $('.test').delay(500).slideDown();
    }
    $('.test').click(function() {
       // Play "animateCube"
    });
    $('.link').click(function() {
        $('.test').fadeOut().delay(500).slideDown();
    });
});

播放Javascript函数

6 个答案: