如何为函数添加名称？

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="name" 或 class="name" 等..

我想我的主要问题是如何将上述代码运行 onload in html 而不是点击？我在哪里命名一个函数以便我以后可以使用它？

如能帮助澄清这一点，我们将不胜感激！干杯！

我收到的很多答案最终让我更加困惑，我实际上不确定现在该做什么。我知道我一定是想多了，但我仍然不知道该怎么做让网站在点击和页面加载时随机化。

这是我目前的代码。

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

当然

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 2

您的代码中有一个匿名函数。这些对于一次性调用或用作 callback functions 很有用。对于您要完成的工作，您想将 FUNCTION REFERENCE 分配给一个变量。稍后可以使用括号调用函数引用，例如var_name()

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

onclick="x()"

Answer 3

看起来像这样：

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

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

像这样在脚本中放置 onload 侦听器是可取的，原因有几个，例如关注点分离、更清晰的标记等。

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

Answer 4

您不需要一个带有您想要实现的名称的函数（函数名称主要用于使调试器中的堆栈跟踪比一打列表更有用 (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 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();
});

如何为函数添加名称？

How to add a name to a function?

html

javascript

jquery

function

函数声明

匿名函数表达式

命名函数表达式

函数构造函数