防止在 Svelte 中双击 onclick答案

【问题标题】：Preventing double click on onclick in Svelte防止在 Svelte 中双击 onclick
【发布时间】：2021-02-15 19:49:46
【问题描述】：

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

如何在 Svelte 上实现它？ Svelte 有什么特殊的方法可以只注册一键不注册双键吗？

非常感谢任何帮助。

【问题讨论】：

标签： svelte svelte-3

【解决方案1】：

您可以通过例如实现此行为调用点击处理程序时将布尔值设置为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>

【讨论】：

【解决方案2】：

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

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

网上有很多 sn-ps 的节流功能，或者你可以使用无数的 npm 包之一。

【讨论】：