使用 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();});