滚动时仅在指定类存在时单次前置插入元素 如何避免重复添加？

问题根源 #

• 滚动事件触发频率极高，只要#container有active类，每次触发都会执行一次prepend操作，导致元素重复插入
• $("#container-wrapper").remove("<p>Test</p>")写法错误，jQuery的remove()方法是删除当前选中的元素本身，而非传入选择器删除子元素，原有代码根本无法正确移除插入的p标签

修正方案 #

核心思路是插入前先判断元素是否已经存在，避免重复插入；删除时精准选中要移除的p标签，两种实现可选：

方案1：给插入元素加专属标识判断（逻辑更直观） #

$(window).scroll(function() {
  const $wrapper = $("#container-wrapper");
  const $targetP = $wrapper.children("p.insert-test");
  if($("#container").hasClass("active")){
    $wrapper.addClass("active-exists");
    // 元素不存在才执行插入
    if($targetP.length === 0) {
      $wrapper.prepend("<p class='insert-test'>Test</p>");
    }
  } else {
    $wrapper.removeClass("active-exists");
    // 元素存在才执行删除
    if($targetP.length > 0) {
      $targetP.remove();
    }
  }
});

方案2：用状态变量判断（性能更好，减少DOM查询次数） #

// 外部定义状态标记，无需每次滚动都查询DOM判断元素是否存在
let hasInserted = false;
$(window).scroll(function() {
  const $wrapper = $("#container-wrapper");
  if($("#container").hasClass("active")){
    $wrapper.addClass("active-exists");
    if(!hasInserted) {
      $wrapper.prepend("<p class='insert-test'>Test</p>");
      hasInserted = true;
    }
  } else {
    $wrapper.removeClass("active-exists");
    if(hasInserted) {
      $wrapper.children("p.insert-test").remove();
      hasInserted = false;
    }
  }
});

额外优化建议 #

如果想进一步降低滚动事件的执行频率，避免不必要的性能消耗，可以加节流处理：

// 100ms最多执行一次滚动逻辑
let scrollTimer = null;
let hasInserted = false;
$(window).scroll(function() {
  if(scrollTimer) return;
  scrollTimer = setTimeout(() => {
    const $wrapper = $("#container-wrapper");
    if($("#container").hasClass("active")){
      $wrapper.addClass("active-exists");
      if(!hasInserted) {
        $wrapper.prepend("<p class='insert-test'>Test</p>");
        hasInserted = true;
      }
    } else {
      $wrapper.removeClass("active-exists");
      if(hasInserted) {
        $wrapper.children("p.insert-test").remove();
        hasInserted = false;
      }
    }
    scrollTimer = null;
  }, 100);
});

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