JS功能在Chrome而不是Firefox的

Question

我創建了Chrome上工作正常，但似乎在Firefox

產生錯誤

ReferenceError: playNextClip is not defined 

您可以查看站點的功能工作如下。

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

儘量給功能界定及前addeventlistener。

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

函數聲明通常是在javascript中的hoisted。函數聲明指聲明功能，如：

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

函數表達式在JavaScript的懸掛，函數表達式如下所示：

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

通過hoisting這意味着，函數聲明和定義將被移動到頂部的父功能，所以你可以使用它實際上在代碼中定義之前。

在條件中聲明的函數由firefox和webkit（在非嚴格模式下）處理方式不同。聲明爲declaration的函數實際上被firefox視爲expression，並且阻止提升，即使在條件內，Chrome仍然會提升函數聲明。

因此，它適用於Chrome，因爲它已經掛起，並且在Firefox中不起作用，因爲它沒有掛起。作爲修復，您可以在實際使用它之前定義這些功能。