表单自动提交异常：setTimeout为何表现如setInterval重复提交？

原本想实现表单在2秒后自动提交，但代码运行后出现定期重复提交的情况，和setInterval的表现一致。不理解为什么setTimeout会有这样的行为，求原因。

相关代码 #

JavaScript代码 #

setTimeout(function() {submitForm();}, 2000);
function submitForm(){
    document.getElementById("form").submit();
}

PHP/HTML表单代码 #

echo '<div class="search" id="searching" style=" align=center">';
echo "<form name=\"input\" id=\"form\" action=\"$targetpage\" method=\"get\" target=\"framedxup\">";
    
echo SEARCH_TXT . "  <input type=\"text\" value=\"$srch\" autocomplete=\"off\" name=\"searchterm\">";
echo " <input type=\"submit\" id=\"button\" name=\"button\" value=\"Search\">";

核心问题是表单提交后页面会重新加载（哪怕表单目标是iframe，若当前承载JS的页面被刷新），每次页面加载时，你的setTimeout代码都会重新执行一遍——相当于每2秒提交一次，提交后页面刷新又触发新的setTimeout，循环往复，看起来就和setInterval的效果一样。

你可以通过以下方式避免重复执行：

• 在页面加载时判断是否是首次进入，比如通过URL参数标记：提交后给URL加个?submitted=1，JS里先检查这个参数，存在就不执行setTimeout。
• 提交表单后确保当前页面不会刷新（比如确认表单的target指向的iframe不会导致主页面重载）。
• 提交后禁用触发逻辑，比如把相关函数置空或添加执行标记。

示例修改后的JS代码（添加URL参数判断）：

// 检查URL是否包含已提交标记
if (!window.location.search.includes('submitted=1')) {
  setTimeout(function() {submitForm();}, 2000);
}

function submitForm(){
    const form = document.getElementById("form");
    // 给表单添加提交标记参数
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'submitted';
    input.value = '1';
    form.appendChild(input);
    form.submit();
}

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