函数声明

Question

这可能是一个非常简单的问题，但我对jQuery或JavaScript如何以这种方式工作感到困惑。

如果我有像这样的功能

$(function() {
    $('section').on('click', 'div', function(e) {
    var number = Math.floor(Math.random()*videos.length);
    $(this).find('source').each(function(index){ 
          videoSrc = videos[number][index].src;
          $(this).attr('src', videoSrc);
          $('video').load();
          $('video').play();
        });
    });
});

我如何编写它以便我可以引用它来运行html？

<body onload="run this function()"> </body>

我看到的函数就像window.onload = function（）或thisFunction = function（）等。并且让我感到困惑的是，与HTML之类的东西相比，如何声明一个函数，它实际上只是div id =＆＃34; name＆＃34;或者类=＆＃34;名称＆＃34;等等。

我想我的主要问题是如何让上面的代码在html中运行onload而不是点击？我在哪里标题功能，以便我以后可以使用它？

任何有关澄清这一点的帮助将不胜感激！干杯！

我收到的很多答案最终变得更加混乱，我实际上不确定现在该做什么......我知道我一定在想这个但我仍然无法想象如何使网站随机点击和页面加载。

这是我目前的代码。

HTML

    <head>
        <title>Randomizer</title>
    </head>

    <body> 

         <section>

          <div>
            <video loop autoplay>
              <source src="" type="">
              <source src="" type="">
              Your browser does not support the <code>video</code> element.
            </video>
          </div> 

        </section>

    </body>

</html>

JavaScript

var videos = [
    [{type:'mp4', 'src':'/videos/1.webm'}, {type:'webm', 'src':'/videos/1.mp4'}],
    [{type:'mp4', 'src':'/videos/2.webm'}, {type:'webm', 'src':'/videos/2.mp4'}],
    [{type:'mp4', 'src':'/videos/3.webm'}, {type:'webm', 'src':'/videos/3.mp4'}],
    [{type:'mp4', 'src':'/videos/4.webm'}, {type:'webm', 'src':'/videos/4.mp4'}],
    [{type:'mp4', 'src':'/videos/5.webm'}, {type:'webm', 'src':'/videos/5.mp4'}], 

];



$(function() {
    $('section').on('click', 'div', function(e) {
    var number = Math.floor(Math.random()*videos.length);
    $(this).find('source').each(function(index){ 
          videoSrc = videos[number][index].src;
          $(this).attr('src', videoSrc);
          $('video').load();
          $('video').play();
        });
    });
}); 


$(document).ready(function() { 
    var number = Math.floor(Math.random()*videos.length); 
     $(this).find('source').each(function(index){ 
          videoSrc = videos[number][index].src;
          $(this).attr('src', videoSrc);
          $('video').load();
          $('video').play();
        });
 }
);

我能够最终理解它如何与上面的代码一起工作。

感谢大家的帮助！

Answer 1

你不需要一个具有你想要实现的名称的函数（函数名称对于使调试器中的堆栈跟踪比十几个 (anonymous function) 的列表更有用。）。你需要在变量中有一个函数。

在JavaScript中创建函数有四种方法。

函数声明

这将在当前作用域中创建变量foo并为其分配命名函数。

function foo () {

}

函数声明被提升，因此在适用范围内放置它们并不重要。在你使用它们之前定义它们被认为是很好的编码实践。

匿名函数表达式

这将创建一个没有名称的函数，并在表达式中使用它。在此示例中，它被分配给变量something。

something = function () {

};

命名函数表达式

这与匿名函数表达式相同，不同之处在于它具有名称，在其自身范围内创建该名称的变量，并且在旧版本的Internet Explorer中为horribly broken。

something = function foo () {

};

函数构造函数

不要使用函数构造函数。它们是eval的另一个名字。如果您有兴趣，可以在MDN上阅读相关内容。

您当前正在使用匿名函数表达式并将其作为函数参数传递（而不是像上面的示例那样将其分配给变量）。

只需单独定义函数（使用上述任何技术），然后传递变量。

function foo(e) {
    var number = Math.floor(Math.random()*videos.length);
    // etc
}

$('section').on('click', 'div', foo);

注意范围。在另一个函数中声明一个函数将创建一个本地变量，您无法使用内部事件属性进行全局调用。

也就是说，自1997年以来我们已接近二十年，所以你不应该使用内在的事件属性。

$(document).on('load', foo);

Answer 2

当然

function myname() {
    $('section').on('click', 'div', function(e) {
    var number = Math.floor(Math.random()*videos.length);
    $(this).find('source').each(function(index){ 
          videoSrc = videos[number][index].src;
          $(this).attr('src', videoSrc);
          $('video').load();
          $('video').play();
        });
    });
};

是必需的

然后

myname();

Answer 3

您的代码中包含匿名函数。这些对于一次性调用或用作callback functions非常有用。对于您要完成的任务，您需要将FUNCTION REFERENCE分配给变量。稍后可以通过使用括号来调用函数引用，例如，使用括号。 VAR_NAME（）

var x = function(){
  // your code
}

onclick="x()"

Answer 4

看起来像这样：

$(function() {
    function myFunction() {
        $('section').on('click', 'div', function(e) {
            ...
        });
    }

    $('body').on('load', function() {
        myFunction();
    });
});

将onload侦听器放在脚本中是有利的，原因有多种，例如关注点分离，清理标记等。

也就是说，原始代码在没有body onload属性的情况下执行相同的工作。你实际上并不需要任何一种方法。

Answer 5

命名您可以编写的功能

function function_name(){
    $('section').on('click', 'div', function(e) {
    var number = Math.floor(Math.random()*videos.length);
    $(this).find('source').each(function(index){ 
          videoSrc = videos[number][index].src;
          $(this).attr('src', videoSrc);
          $('video').load();
          $('video').play();
        });
    });
};

然后将其称为function_name();

要在html准备就绪时运行，请编写

$( document ).ready(
    function_name();
});

如何为函数添加名称？

5 个答案:

函数声明

匿名函数表达式

命名函数表达式

函数构造函数