为何在setTimeout中调用scrollTo事件无法按预期延迟执行？

错误原因分析 #

1. 直接调用scrollTo导致无延迟：
   你最初的写法setTimeout(e.target.scrollTo({...}), 50000)存在本质错误——e.target.scrollTo(...)会立即执行，并把它的返回值（scrollTo无返回值，即undefined）传给setTimeout，相当于调用了setTimeout(undefined, 50000)，自然不会产生延迟效果。setTimeout的第一个参数必须是函数引用，而非函数执行结果。

2. 函数参数与调用问题：
   你写的updateKanbanOnScrollBottom函数要求传入params和e两个参数，若调用时未正确传递e（比如事件绑定阶段未传入事件对象），就会触发参数缺失报错。此外，即使传了e，也要注意事件对象可能在异步回调中被浏览器回收，直接依赖e.target存在风险。

修正后的实现方案 #

方案1：简化函数，提前保存目标元素 #

直接将目标DOM元素作为参数传入，避免依赖事件对象，逻辑更清晰：

const delayedScrollToBottom = (targetElement) => {
  // 提前保存目标元素，防止异步回调中引用失效
  setTimeout(() => {
    targetElement.scrollTo({ 
      top: targetElement.scrollHeight - 2000, 
      left: 0, 
      behavior: 'smooth' 
    });
  }, 5000);
};

调用示例（以滚动事件触发为例）：

// 给需要监听的元素绑定滚动事件
yourKanbanElement.addEventListener('scroll', (e) => {
  // 假设这里是判断滚动到底部的逻辑
  if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight) {
    delayedScrollToBottom(e.target);
  }
});

方案2：修正原有函数，确保参数正确传递 #

如果要保留原函数结构，需优化参数处理并确保调用时传参正确：

const updateKanbanOnScrollBottom = (params, e) => {
  // 提前缓存目标元素，避免依赖异步中的事件对象
  const target = e.target;
  setTimeout(() => {
    target.scrollTo({ 
      top: target.scrollHeight - 2000, 
      left: 0, 
      behavior: 'smooth' 
    });
  }, 5000);
};

调用注意事项：
调用时必须完整传递两个参数，比如在点击事件中：

someTriggerElement.addEventListener('click', (e) => {
  const customParams = { /* 你的业务参数 */ };
  updateKanbanOnScrollBottom(customParams, e);
});

关键注意事项 #

• setTimeout第一个参数必须是函数，不能是函数执行的结果（除非该结果本身是函数）。
• 异步回调中尽量避免直接依赖事件对象e，提前保存目标DOM元素是更稳妥的做法。
• 若不需要params参数，可直接简化函数，只接收目标元素作为参数，减少不必要的复杂度。

内容的提问来源于stack exchange，提问作者José Henrique Queiroz