如何使用JS为每个滚动触发的标题添加单次打字机效果

现有代码的可优化点 #

你现在的用数组存已触发标题的逻辑本身是成立的，但还有两个可以优化的地方：

• 数组的includes方法查询时间复杂度是O(n)，虽然8个标题的数据量影响极小，但用Set结构查询效率更高，是O(1)
• 如果存在两个内容完全相同的标题，会出现误判，导致其中一个标题无法触发效果

优化实现方案 #

方案1：基于现有传字符串的逻辑优化（仅适用标题内容全部唯一的场景）

直接把数组替换成Set，逻辑更简洁，执行效率更高：

// 存储已触发过效果的标题内容
const triggeredTitles = new Set();

function typeWriteEffect(string) {
  // 已经触发过就直接退出，不执行后续逻辑
  if (triggeredTitles.has(string)) return;
  // 标记为已触发
  triggeredTitles.add(string);
  
  // 这里写入你原本的打字机效果实现代码
  console.log(`触发${string}的打字机效果`);
}

方案2：兼容重名标题的稳妥方案（推荐）

给每个标题DOM加上唯一的自定义标识，比如data-title-id属性，滚动检测时获取该id和对应标题内容，传入函数判断，完全避免重名误判问题：

// 存储已触发过效果的标题唯一id
const triggeredTitleIds = new Set();

// 入参1为标题唯一id，入参2为标题内容
function typeWriteEffect(titleId, titleStr) {
  if (triggeredTitleIds.has(titleId)) return;
  triggeredTitleIds.add(titleId);
  
  // 这里写入你原本的打字机效果实现代码
  console.log(`触发id为${titleId}的打字机效果，内容为${titleStr}`);
}

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