javascript - 如何在js中实现去抖动

Question

我在 Vuejs 中有一个如下所示的函数。

当您单击按钮时，“start()”会运行，函数 rn() 也会运行。
但只需单击一下按钮，“const 命令”就会在 0.1 秒、3 秒、2 秒或 2 秒内发生更改。
也就是说“按钮”只被点击一次，但“命令”却在短时间内发生了很大的变化。
但是当命令更改时间不超过 3 秒时，我希望 Axios 帖子能够运行。
尽管我尝试使用 Lodash debounce，但我还没有找到解决方案。
你能帮我解决这个问题吗？非常感谢您的阅读。

<template>
    <button @click="start()">Start</button>
</tempalte>

methods:{
    start() {
        ..
        ..
        ..
        function rn() {
           const command = something..
           ..
           axios.post('localhost:4000', {data: command})
        }
    }
}

Answer 1

以天真的方式去做。

const ELAPSE_TIME = 3000; // 3 second
let oldCommand;
let lastTime;

function update() {
   if (buttonIsPressed) {
       const command = getCurrentCommand();

       if (command !== oldCommand) { // command has changed
           lastTime = new Date().getTime();
       } else { // command has not changed
           let now = new Date().getTime();
           let duration = now - lastTime;

           if (duration > ELAPSE_TIME) { // already 3 second
               postUpdate();
               lastTime = now - ELAPSE_TIME;
           }
       }
   }
}


setInterval(update, 100);