播放Javascript函数

我对jQuery的掌握还很薄弱，但我正在尝试学习向其添加常规Javascript的基础知识。我想将动画序列“保存”为函数，然后通过几个不同的单击事件调用该函数。最好的办法是什么

jsFiddle-

简化的示例代码：

$(document).ready(function() {

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

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

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

});

---

我会将该函数分配给一个

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

---

您只需从单击处理程序调用函数

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

---

您只需按如下方式调用该函数：

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

试试这个：

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

---

由于您正在尝试使用常规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中一直做的那样（

）。单击（function

$(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);
});

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

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

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