SPA页面控制台代码异常及DOM闪烁问题的原因排查与解决咨询

让我们逐个拆解你遇到的三个问题，分析背后的原因并给出可行的解决方案：

1. 切换筛选后代码失效 #

原因 #

• 你当前依赖$(document).ajaxSuccess()触发DOM更新，但很多现代SPA可能使用fetch API、原生XMLHttpRequest而非jQuery的AJAX方法，这类请求不会触发jQuery的ajaxSuccess事件。
• 筛选交互后，页面会重新渲染目标区域的DOM节点（比如价格、链接元素被完全替换），之前的DOM修改会被新渲染的元素覆盖，而你的代码没有在DOM重新生成后再次执行。

解决方案 #

改用MutationObserver监听目标容器的DOM变化，这是更可靠的SPA DOM更新监听方式，不依赖特定的AJAX实现：

// 目标容器（根据实际页面结构调整，比如包裹筛选结果的父元素）
const targetContainer = document.querySelector('.latest-offers-container');

// 创建观察者实例
const observer = new MutationObserver(() => {
  // DOM变化后延迟执行更新（确保新元素已渲染完成）
  setTimeout(updateChanges, 30);
});

// 配置观察选项：监听子节点添加/移除、属性变化
observer.observe(targetContainer, {
  childList: true,
  subtree: true
});

// 初始执行一次
updateChanges();

2. append操作与数值计算重复执行两次 #

原因 #

• ajaxSuccess可能被多次触发（比如筛选时存在多个AJAX请求并行完成），加上你初始调用了一次updateChanges()，导致代码执行多次。
• append()是每次都向元素末尾添加新内容，重复执行会生成多个重复的.someText元素；而价格计算是基于当前DOM文本修改，重复执行会导致数值被多次相乘（比如原始价格£100，第一次变成£400，第二次变成£1600）。

解决方案 #

• 避免重复添加元素：先检查.someText是否存在，不存在再添加；或者用html()替换而非append()。
• 价格计算基于原始值：把原始价格存储在元素的data属性中，每次计算都用原始值，避免重复相乘。
• 确保同一时间只执行一次更新逻辑。

修改后的updateChanges函数：

function updateChanges(){
  // 定位元素
  const whatsOnLink = $("a#whatsOnLink");
  const latestType = $("p.latest-type");
  const bookingButton = $("a.button.bookingEngine.button-red");
  const priceElements = $('.latest-offer-price');

  // 链接样式修改（直接覆盖，重复执行不影响）
  whatsOnLink.css({"position": "absolute" ,"margin-top": "110px", "margin-left": "-50px"});
  latestType.css({"font-size": "16px"});
  bookingButton.css({"margin-top": "-10px"});

  // 避免重复添加.someText元素
  if(!latestType.find('.someText').length){
    latestType.append("<p class='someText'><b>2 Adults and 2 Children</b></p>");
    $("p.someText").css({"font-size": "12px","margin-top": "10px"});
  }

  // 基于原始价格计算（首次执行时存储原始值）
  priceElements.each(function(){
    const el = $(this);
    // 如果没有存储原始价格，先获取并存储
    if(!el.data('originalPrice')){
      const originalData = el.text().substring(1);
      el.data('originalPrice', originalData);
    }
    // 用原始价格计算
    const originalPrice = el.data('originalPrice');
    el.text('£' + (originalPrice * 4));
  });
}

3. 切换筛选时DOM元素紫色闪烁 #

原因 #

• 这通常是Chrome开发者工具的**"Show paint flashing"**功能开启导致的（该功能会用紫色高亮页面中被重绘的区域），并非页面本身的问题。
• 若关闭该功能后仍有闪烁，说明筛选时DOM元素被频繁删除重建，导致页面频繁重绘重排，引发视觉抖动。

解决方案 #

1. 关闭开发者工具的高亮功能：打开Chrome DevTools → 按Esc打开控制台抽屉 → 点击More tools → 取消勾选Show paint flashing。
2. 优化DOM操作：
   • 尽量减少频繁的DOM增删操作，复用现有元素而非删除重建。
   • 批量修改样式，避免单个元素多次触发重绘（比如合并CSS修改，或先隐藏元素修改后再显示）。

内容的提问来源于stack exchange，提问作者HM Tanbir