使用 Jquery 的 .each() 函数使网页在移动设备上滞后

Question

当我单击 aspan或div元素时，会播放音频。该功能还包含.each()防止音频相互重叠，即当用户单击一个单词时播放音频，当用户单击另一个单词时，当前音频停止播放并播放新音频。

问题是，我有过千span或div上我的一些网页元素，而网页的作品完美的计算机上，它在移动/更小的设备可怕滞后。

网页在计算机上加载最多需要 2 秒，但在移动/小型设备上需要 15-20 秒。我已经找到了这个.each()函数的罪魁祸首，因为我猜它在加载时会遍历页面上的 1000 多个元素，而移动设备无法承受此加载。

我正在寻找此问题的解决方案，因为如果我删除该.each()功能，页面会在移动设备上快速加载，但随后会出现音频重叠问题。任何帮助，将不胜感激。

<span data-audio-url="hello.mp3">Hello</span>

<span data-audio-url="hello.mp3">Hello</span>

<span data-audio-url="hello.mp3">Hello</span>    

<div data-audio-url="hello.mp3">Hello</div>

$("span, div").each(function(event) { 

  $(this).data('audio-object', new Audio()); 

}).on('click', function (event, e) {

  var e = event || window.event;

  e.cancelBubble = true;

  if (e.stopPropagation) 

    e.stopPropagation();

  var audio_url = $(this).attr('data-audio-url');

  $("span, div").each(function() {

    var audio = $(this).data('audio-object');

    if (audio.src) {

      audio.pause();

      audio.currentTime = 0;

    }    

  });

  var clickedAudio = $(this).data('audio-object');

  if (!clickedAudio.src) { 

    clickedAudio.src = audio_url; 

  }    

  clickedAudio.play();

});