jQuery事件与setTimeout：解决DOM元素属性访问失效问题

本文探讨在jquery事件处理器中结合`settimeout`时，如何正确访问dom元素的属性。重点分析了常见的变量作用域混淆和事件目标元素误用问题，并提供了利用javascript闭包机制的解决方案，确保在异步操作中仍能准确获取并操作事件触发的dom元素。

jQuery事件与异步操作中的DOM元素访问

在前端开发中，我们经常需要在用户交互事件（如点击、触摸）触发后执行一些延迟操作。将setTimeout与jQuery事件处理器结合使用是常见模式，但这其中隐藏着一些关于JavaScript作用域和事件对象（e）的陷阱，可能导致无法正确访问到事件触发的DOM元素属性。

常见问题分析

当我们在一个事件监听器内部使用setTimeout时，可能会遇到两个主要问题：

1. 变量作用域混淆与闭包问题： setTimeout的回调函数会创建一个新的执行上下文。如果在这个回调函数中再次定义一个与外部同名的参数（例如 function(e)），它会“遮蔽”外部作用域中的e变量。这意味着，在setTimeout的回调函数内部，e将不再是原始的事件对象，而是setTimeout自身传递的（通常是undefined或window对象，取决于浏览器实现和参数传递方式）。

2. 事件目标元素混淆： 在使用jQuery的$(document).on("touchstart", "figure img", ...)这样的事件委托模式时，选择器"figure img"已经精确地指定了事件应作用的元素是<img>。因此，在事件回调中，e.target和e.currentTarget都将指向被点击的<img>元素。如果此时尝试通过figure = e.currentTarget; img = figure.querySelector("img");来获取<img>，就相当于在一个<img>元素内部再次查找<img>子元素，这显然是不正确的。

以下是一个展示这些问题的示例代码：

let myTimeout;
const time = 2000;

$(document).on("touchstart", "figure img", (e) => {
  // 这里的e是原始的事件对象
  myTimeout = setTimeout(function(e) { // 注意：这里的e会遮蔽外部的e
    var figure = e.currentTarget; // 此时的e可能不是原始事件对象
    var img = figure.querySelector("img"); // 如果e不正确，这里会出错
    var src = img.getAttribute("src");
    console.log("src>" + src);
    console.log("PRESS DELAY");
  }, time);
});

在这个错误示例中，setTimeout回调函数中的e参数遮蔽了外部箭头函数中的e。当setTimeout被调用时，它内部的e实际上是undefined，导致后续对e.currentTarget的访问失败。

解决方案

要解决上述问题，关键在于正确利用JavaScript的闭包特性来捕获外部作用域中的e变量，并避免在setTimeout回调中重新定义同名参数。同时，要明确e.target或e.currentTarget在事件委托中的实际指向。

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

22

查看详情

正确的做法是让setTimeout的回调函数不接收任何参数，从而允许它通过闭包访问到外部箭头函数作用域中的e变量。由于$(document).on("touchstart", "figure img", ...)已经确保了事件监听器只会在<img>元素上触发，因此e.target（或e.currentTarget）将直接指向我们需要的<img>元素。

以下是修正后的代码示例：

let myTimeout;
const time = 2000;

$(document).on("touchstart", "figure img", (e) => {
  // 这里的e是原始的事件对象，并会被setTimeout的回调函数通过闭包捕获
  myTimeout = setTimeout(function() { // 不再传入e作为参数，避免遮蔽
    var img = e.target; // 直接使用外部作用域捕获的e.target
    var src = img.getAttribute("src");
    console.log("src>" + src);
    console.log("PRESS DELAY");
  }, time);
});

这段代码的HTML结构如下：

<section>
  <figure>
    <img src="https://picsum.photos/536/354" />
  </figure>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

通过这种方式，setTimeout的回调函数能够正确地访问到事件触发时捕获的e对象，进而准确地获取到<img>元素的src属性。

关键点总结

• 闭包的运用：当在异步回调函数（如setTimeout）中需要访问外部作用域的变量时，应利用JavaScript的闭包特性。确保异步函数不重新声明同名参数，以便其能够访问到外部作用域的变量。
• 理解e.target与e.currentTarget：在事件委托中，e.target指向实际触发事件的元素，而e.currentTarget指向事件监听器绑定的元素（在委托模式下，通常是委托父元素或document）。然而，当事件选择器足够具体时（如"figure img"），e.target通常就是你想要操作的元素。
• 避免变量遮蔽：在嵌套函数中，如果内部函数定义了与外部函数同名的参数或局部变量，它将遮蔽外部函数的同名变量。这是导致许多作用域相关问题的原因。

注意事项

• jQuery版本兼容性：虽然本例使用的是jQuery 1.9.1，但上述关于JavaScript作用域和闭包的原理适用于所有JavaScript环境，与jQuery版本无关。
• 性能考量：频繁地使用setTimeout或setInterval可能会影响页面性能。在实际应用中，应根据需求合理使用，并考虑是否需要清除未完成的定时器（例如，在用户再次触摸前清除前一个myTimeout）。
• 用户体验：长时间的延迟操作可能会影响用户体验。确保延迟时间合理，并考虑提供视觉反馈，告知用户操作正在进行。

以上就是jQuery事件与setTimeout：解决DOM元素属性访问失效问题的详细内容，更多请关注php中文网其它相关文章！