防止双击 Svelte 中的 onclick

Question

我使用 onclick 来触发我的函数，但我想防止在进行双击操作时调用该函数。

如何在 Svelte 上实现它？ Svelte 是否有任何特殊的方式来注册一次单击而不注册两次？

非常感谢任何帮助。

Answer 1

Svelte 中没有内置任何东西来执行此操作。

但这可以通过将要执行的函数包装在节流函数中来轻松完成，这基本上会限制在特定时间范围内可以进行的点击次数。

可以在网上找到很多节流函数的片段，或者您可以使用为您完成的无数 npm 包之一。

Answer 2

您可以通过例如在调用点击处理程序时将布尔值设置为 true，并在一段时间后使用超时将其重置回 false。如果此布尔值在新点击时为 true，则忽略它。

示例 (REPL)

<script>
    let hasBeenClicked = false;
    
    function handleClick() {
        if (hasBeenClicked) return;
        
        hasBeenClicked = true;
        setTimeout(() => {
            hasBeenClicked = false;
        }, 200);
        
        console.log('click');
    }
</script>

<button on:click={handleClick}>Click me</button>

防止双击 Svelte 中的 onclick

Preventing double click on onclick in Svelte

svelte

svelte-3