JavaScript数组实例重复创建问题：如何重置搜索状态？

核心原因 #

你遇到的问题是每次搜索都会给按钮新增一个点击事件处理程序，而每个处理程序都持有当时创建的foundset数组引用。第二次搜索时，旧的事件处理程序并没有被移除，点击按钮时会同时触发新旧两个处理逻辑，导致看起来存在两个数组实例。

另外原代码还有个小bug：点击事件里先执行foundset.shift()再取foundset[0]，会直接跳过第一个匹配项，因为shift已经移除了数组第一个元素，后续滚动的是原数组的第二个元素。

解决方案一：每次搜索前清除旧事件（推荐） #

每次执行搜索逻辑前，先移除按钮上已绑定的点击事件，再绑定新的处理程序，确保只有当前搜索对应的foundset生效：

// 每次搜索第一步：清除按钮上旧的点击事件
$('#results button').off('click');

// 重新初始化当前搜索的结果数组
const foundset = [];

// 执行搜索逻辑填充数组
$('.searchable').each(function(){
  const entryId = $(this).parent('.entry').attr('id');
  if($(this).html().toUpperCase().indexOf(searchValue) > -1 && !foundset.includes(entryId)) {
    foundset.push(entryId);
  }
});

// 绑定当前搜索对应的点击事件
$('#results button').on('click', function () {
   if (foundset.length > 0) {
     // 先获取要滚动的目标ID，再修改数组
     const targetId = foundset[0];
     foundset.shift();
     
     $('html, body').animate({
       scrollTop: $('#' + targetId).offset().top - 200
     }, 1000);
     
     // 数组为空时更新UI
     if(foundset.length === 0) {
       $('#results').hide();
       $('#results .search-term').text('');
       $('#results .count').text('');
     }
   }
});

解决方案二：将数组提升到外部作用域，每次搜索重置 #

如果不想频繁解绑/绑定事件，可以把foundset放在外部作用域，每次搜索时直接清空数组，而不是重新声明：

// 外部作用域声明结果数组，确保所有逻辑共享同一个实例
let foundset = [];

// 封装搜索逻辑
function performSearch(searchValue) {
  // 每次搜索先重置数组
  foundset = [];
  
  // 填充搜索结果
  $('.searchable').each(function(){
    const entryId = $(this).parent('.entry').attr('id');
    if($(this).html().toUpperCase().indexOf(searchValue) > -1 && !foundset.includes(entryId)) {
      foundset.push(entryId);
    }
  });
}

// 初始化时只绑定一次点击事件（放在页面加载完成的逻辑里）
$('#results button').on('click', function () {
   if (foundset.length > 0) {
     const targetId = foundset[0];
     foundset.shift();
     
     $('html, body').animate({
       scrollTop: $('#' + targetId).offset().top - 200
     }, 1000);
     
     if(foundset.length === 0) {
       $('#results').hide();
       $('#results .search-term').text('');
       $('#results .count').text('');
     }
   }
});

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