Question

我创建了一个在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中无效？如何使其与浏览器兼容？

谢谢！

Answer 1

if ( ((++n)%3) == 0)

尝试在addeventlistener之前给出函数defination。

Answer 2

为什么这适用于Chrome？但不适用于Firefox？

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

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

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

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

        }

    }

Answer 4

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

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

函数表达式不会在javascript中提升，函数表达式如下所示：

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

通过hoisting意味着，函数声明和定义将被移到父函数的顶部，因此可以在代码中实际定义它之前使用它。

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

因此，它适用于Chrome，因为它没有悬挂，因此无法在Firefox中使用。作为修复，您可以在实际使用之前定义函数。

JS功能在Chrome中运行，但在Firefox中不起作用

4 个答案: