функции JS работают в Chrome, но не Firefox

Question

Я создал функцию, которая прекрасно работает на Chrome, но, кажется, приводит к ошибке на светлячок

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

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

Пытаться дать функцию Defination перед добавочный исполнитель.

Answer 2

Если я понял область видимости в 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 3

Почему это работает в Chrome, но не в Firefox?

Поскольку вы пишете недействительный JavaScript, и, к сожалению, браузеры решили изящно обрабатывать это по-разному, а не бросать ошибку.

Согласно спецификации, объявления функций внутри блоков недействителен. Chrome решил рассматривать их как объявления функций и поднимать их, Firefox рассматривает их больше как функциональные выражения.

Решение состоит в том, чтобы не использовать декларации функций внутри блоков. Либо объявите их за пределами блока (т. Е. До или после оператора if в вашем случае), либо используйте выражение функции. Если вы используете выражение функции, вы должны определить его, прежде чем ссылаться на него.

Answer 4

Объявление функций обычно hoisted в javascript. декларации функций относятся к декларированию функций, такие как:

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

Функциональных выражения не водрузили в JavaScript, функция выражение выглядит следующим образом:

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

По hoisting это означает, объявление функции и определение будут перенесены наверх родительской функции, поэтому вы можете использовать , прежде чем определять его в коде.

Функции, объявленные внутри условия, обрабатываются по-разному с помощью firefox и webkit (в то время как в нестрогом режиме). Функции, объявленные как declaration, фактически обрабатываются как expression firefox и предотвращают подъем, где, поскольку Chrome по-прежнему поднимает декларацию функции, даже если она находится внутри условия.

Так он работает для вас в Chrome как его поднят и не работает в Firefox, так как он не поднимается.В качестве исправления вы можете определить функции до фактического использования.