JS 函数在 Chrome 中有效，但在 Firefox 中无效答案

【问题标题】：JS functions work in Chrome but not FirefoxJS 函数在 Chrome 中有效，但在 Firefox 中无效
【发布时间】：2015-12-03 06:24:32
【问题描述】：

我创建了一个在 Chrome 上运行良好但在 firefox 上似乎产生错误的函数

ReferenceError: playNextClip is not defined

您可以查看该网站：http://thewild.com.au/caleboys/

我的JS如下。

 function queueVideos(num, amount) {

    if (num < amount) {
        document.getElementById('video-element-'+num).addEventListener(
            'ended',
            playNextClip,
            false);
        function playNextClip() {
            var nextVid = num + 1;
            $( '#video-element-' + nextVid ).show().get(0).play();
            $( '#video-element-' + num ).hide();
            document.getElementById( 'video-element-' + num ).pause();
            document.getElementById( 'video-element-' + num ).currentTime = 0;
            queueVideos(nextVid, amount)
        }
    }

    if (num == amount) {
        document.getElementById('video-element-'+num).addEventListener(
            'ended',
            playFirst,
            false);
        function playFirst() {
            $( '#video-element-1' ).show().get(0).play();
            $( '#video-element-' + num ).hide();
            document.getElementById( 'video-element-' + num ).pause();
            document.getElementById( 'video-element-' + num ).currentTime = 0;
        }
    }

}

queueVideos(1, 5);

为什么这在 Chrome 中有效，但在 Firefox 中无效？
我该怎么做才能使其跨浏览器兼容？

谢谢！

【问题讨论】：

标签： javascript jquery google-chrome firefox

【解决方案1】：

    function queueVideos(num, amount) {
        if (num < amount) {

            function playNextClip() {
                var nextVid = num + 1;
                $( '#video-element-' + nextVid ).show().get(0).play();
                $( '#video-element-' + num ).hide();
                document.getElementById( 'video-element-' + num ).pause();
                document.getElementById( 'video-element-' + num ).currentTime = 0;
                queueVideos(nextVid, amount)
            }
               document.getElementById('video-element-'+num).addEventListener(
                'ended',
                playNextClip,
                false);
        }

        if (num == amount) {

            function playFirst() {
                $( '#video-element-1' ).show().get(0).play();
                $( '#video-element-' + num ).hide();
                document.getElementById( 'video-element-' + num ).pause();
                document.getElementById( 'video-element-' + num ).currentTime = 0;
            }
document.getElementById('video-element-'+num).addEventListener(
                'ended',
                playFirst,
                false);
        }

    }
    queueVideos(1, 5);

尝试在 addeventlistener 之前给出函数定义。

【讨论】：

【解决方案2】：

为什么这在 Chrome 中有效，但在 Firefox 中无效？

因为您正在编写无效的 JavaScript，不幸的是，浏览器决定以不同的方式优雅地处理这个问题，而不是抛出错误。

根据规范，块内的函数声明是无效。 Chrome 决定将它们视为函数声明并提升它们，Firefox 将它们视为函数表达式。

解决方案是不要在块内使用函数声明。要么在块之外声明它们（即在您的情况下，在 if 语句之前或之后），或者使用函数表达式。如果您使用函数表达式，则必须在引用它之前对其进行定义。

【讨论】：

【解决方案3】：

如果我理解firefox 中的作用域是对的，那么您需要先定义函数firefox，然后再调用它

那就试试这个

    function queueVideos(num, amount) {
    function playNextClip() {
                var nextVid = num + 1;
                $( '#video-element-' + nextVid ).show().get(0).play();
                $( '#video-element-' + num ).hide();
                document.getElementById( 'video-element-' + num ).pause();
                document.getElementById( 'video-element-' + num ).currentTime = 0;
                queueVideos(nextVid, amount)
            }
function playFirst() {
                $( '#video-element-1' ).show().get(0).play();
                $( '#video-element-' + num ).hide();
                document.getElementById( 'video-element-' + num ).pause();
                document.getElementById( 'video-element-' + num ).currentTime = 0;
            }
        if (num < amount) {
            document.getElementById('video-element-'+num).addEventListener(
                'ended',
                playNextClip,
                false);

        }

        if (num == amount) {
            document.getElementById('video-element-'+num).addEventListener(
                'ended',
                playFirst,
                false);

        }

    }

【讨论】：

我认为这个问题实际上是由嵌套的命名函数引起的。
@AlexanderO'Mara 我猜是这样，但是在使用之前先定义这些嵌套函数应该可以解决问题developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
@MikeyMusch 当这两个作为参数传递到函数中时，如何不定义 num 和 amount ？这两个嵌套函数仍然必须在函数 'queueVideos' 内部而不是外部定义。
抱歉，我跑题了，将您的回复与我尝试的第一个失败的解决方案混淆了。

【解决方案4】：

函数声明在javascript中通常是hoisted。函数声明是指声明函数，如：

function myFunction(){..body..};

函数表达式在javascript中没有被提升，函数表达式看起来像：

var myFunction = function(){..body..};

hoisting 的意思是，函数声明和定义将被移到父函数的顶部，所以你可以在代码中实际定义它之前使用它。

firefox 和 webkit 对条件内声明的函数的处理方式不同（在非严格模式下）。声明为declaration 的函数实际上被firefox 视为expression 并防止提升，因为Chrome 仍然提升函数声明，即使在条件内。

所以它在 Chrome 中为你工作，因为它被提升了，而不是在 Firefox 中，因为它没有被提升。作为修复，您可以在实际使用之前定义函数。

【讨论】：