Question

如何在 js 中实现去抖动

2019-11-02

119

javascript node.js vue.js

我在 Vuejs 中有一个类似下面的函数。

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

<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);