Javascript 使用Jquery'；s.each（）函数使网页在移动设备上滞后

当我单击

span

或

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>

---

问题是，您首先不必要地循环遍历每个选定元素，然后在jQuery的

数据

缓存中为该元素添加

音频

元素。然后，在单击处理程序中，再次循环遍历所有元素，并暂停其

数据中的
音频
元素。这两个循环在性能方面非常昂贵

为了简化这个过程，只需在加载页面时在DOM中使用一个
audio
元素，并在单击相关元素时更改其
src
。使用此方法，您不需要任何一个循环

正如@LieRyan在评论中所建议的那样，您可以通过在所有
span
和
div
元素的容器上使用单个委托事件处理程序来避免通过元素的隐式循环来绑定所有事件处理程序。试试这个：


var audio=$（'#player'）[0]；
$（'#container'）。在（'click'，'span，div'，函数（e）上{
e、 停止传播（）；
var audio_url=$（this）.data（'audio-url'）；
audio.src=audio\u url；
音频播放（）；
});

你好
你好
你好
问题在于，首先不必要地循环遍历每个选定元素，然后在jQuery的
数据
缓存中为该元素添加一个
音频
元素。然后，在单击处理程序中，再次循环遍历所有元素，并暂停其
数据中的
音频
元素。这两个循环在性能方面非常昂贵

为了简化这个过程，只需在加载页面时在DOM中使用一个
audio
元素，并在单击相关元素时更改其
src
。使用此方法，您不需要任何一个循环

正如@LieRyan在评论中所建议的那样，您可以通过在所有
span
和
div
元素的容器上使用单个委托事件处理程序来避免通过元素的隐式循环来绑定所有事件处理程序。试试这个：


var audio=$（'#player'）[0]；
$（'#container'）。在（'click'，'span，div'，函数（e）上{
e、 停止传播（）；
var audio_url=$（this）.data（'audio-url'）；
audio.src=audio\u url；
音频播放（）；
});

你好
你好
你好
如果您一次只想播放一个MP3，那么您只需要一个
Audio（）
对象。更大的问题是，为什么页面中有数千个跨距？听起来您应该使用搜索/分页/过滤来减少工作集。这可能不是
。每个
本身，而是为每个跨度创建音频实例，最终会在每个跨度中创建1000多个对象memory@RoryMcCrossan你的解决方案不适用于我的情况对不起…@KIKOSoftware我怎么能做到？有什么例子吗？如果您一次只想播放一个MP3，那么您只需要一个
Audio（）
对象。更大的问题是，为什么页面中有数千个跨距？听起来您应该使用搜索/分页/过滤来减少工作集。这可能不是
。每个
本身，而是为每个跨度创建音频实例，最终会在每个跨度中创建1000多个对象memory@RoryMcCrossan你的解决方案不适用于我的情况对不起…@KIKOSoftware我怎么能做到？有什么例子吗？这仍然会在启动时循环遍历每个元素，这可能不是什么大问题。但是，如果您有很多span和div，并且想要消除它们，您可能需要使用事件委派，因此单击侦听器注册看起来是这样的：
$（“#容器”）。在（'Click'，“span，div”，function…
非常感谢Rory，您的解决方案工作得非常好！我知道同时在屏幕上显示数千个元素不是一个好主意，但我正在努力。再次感谢！我真的很感激你的回答：）@MarwanAnsari在评论部分很难解释，但常规事件附件会为每个匹配的元素附加一个侦听器。如果页面中有1000个跨度，jQuery必须循环1000个元素，并将侦听器附加到每个元素，浏览器必须跟踪1000个事件侦听器对象。事件委派仅在容器上附加一个事件侦听器（通常整个页面只有一个容器），并依赖事件传播从子元素捕获事件。要进一步扩展：这是一个完美的场景：）在这种情况下，将选择器更改为
$（'#yourcainer'）。在（'click'，'span，div'，function（e）{…
@MarwanAnsari）上，您可以将事件委托给
$（'body'）
如果您想绝对捕获页面中的每个span和div，请阅读我链接的页面以获得更多解释。这仍然会在启动时循环遍历每个元素，这会导致