JavaScript如何防止双击导致函数连续执行两次？

你的问题出在浏览器的事件机制上——双击操作会触发两次click事件，而且第二次click的事件会在你第一次点击移除事件绑定之前就被浏览器加入到事件队列中。所以哪怕你在第一次start_search里清空了onclick，第二次点击的事件依然会执行原本的函数逻辑。

方案1：用标志位（执行锁）控制函数调用 #

这是最直观的方案，设置一个标志位标记函数是否正在执行，重复点击时直接跳过。

修改后的代码： #

先调整HTML（移除内联onclick，推荐用事件绑定方式）：

<div id="pre">
   <img src="/pics/magnifying_glass_lg.png" id='preloader' onmouseover='style.setProperty("cursor","pointer");'>
</div>

再编写JS逻辑：

// 执行锁，初始为false表示可执行
let isSearching = false;

function start_search(button) {
    // 如果正在执行，直接返回
    if (isSearching) return;
    
    // 锁定，禁止重复调用
    isSearching = true;
    console.log("开始执行搜索逻辑");

    // --- 这里写你的业务代码 ---
    // 如果是异步操作（比如接口请求），要在异步完成后解锁
    // 示例：
    // fetch('/your-search-api')
    //   .then(res => res.json())
    //   .then(result => {
    //       // 处理搜索结果
    //   })
    //   .finally(() => {
    //       // 无论成功失败，都解锁
    //       isSearching = false;
    //   });

    // 如果是同步代码，执行完直接解锁（这里用setTimeout模拟耗时操作）
    setTimeout(() => {
        console.log("搜索完成，可再次点击");
        isSearching = false;
    }, 1000);
}

// 绑定点击事件
document.getElementById('preloader').addEventListener('click', function() {
    start_search(this);
});

方案2：使用防抖函数 #

防抖函数可以在指定时间内只允许函数执行一次，适合控制重复触发的场景。这里实现一个"首次执行后锁定一段时间"的防抖逻辑：

// 自定义防抖函数：首次触发执行，之后delay时间内忽略重复调用
function lockDebounce(func, delay) {
    let isLocked = false;
    return function(...args) {
        if (!isLocked) {
            func.apply(this, args);
            isLocked = true;
            setTimeout(() => {
                isLocked = false;
            }, delay);
        }
    };
}

function start_search(button) {
    console.log("执行搜索逻辑");
    // 你的业务代码
}

// 生成防抖后的函数，锁定1秒
const debouncedSearch = lockDebounce(start_search, 1000);

// 绑定事件
document.getElementById('preloader').addEventListener('click', function() {
    debouncedSearch(this);
});

方案3：禁用双击事件（不推荐） #

可以通过阻止dblclick事件的默认行为来避免双击触发两次click，但这种方式会影响用户的双击交互体验，仅作为临时应急方案：

document.getElementById('preloader').addEventListener('dblclick', function(e) {
    e.preventDefault();
});

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