javascript - Javascript 中按键事件的限制

Question

我有一个 react 应用程序，我设置了一个事件监听器，以便当用户键入时，会触发自动保存功能。问题是，我不希望在每个事件上触发 api 调用。理想情况下，我希望它在用户输入时每 3 秒左右轮询一次 API。

我当前有以下代码:

 window.setTimeout(function() {
  window.setInterval(function() {
    console.log(data);
    this.actions.autoSave(data); 
  }, 3000);
}, 3000);

正如你所想象的那样，这并不是我所追求的。所以我只是想知道最好的方法是什么？

Answer 1

这是一个通用的节流函数:

var functionName = (function () {
    'use strict';

    var timeWindow = 500; // time in ms
    var lastExecution = new Date((new Date()).getTime() - timeWindow);

    var functionName = function (args) {
         // your code goes here
    };

    return function () {
        if ((lastExecution.getTime() + timeWindow) <= (new Date()).getTime()) {
            lastExecution = new Date();
            return functionName.apply(this, arguments);
        }
    };
}());

如果将其连接到您的案例，可以说用户在文本区域中键入内容，并且您为其保存了一个名为 userText 的变量。

你可以这样做:

userText.addEventListener("keyup", function(e){
函数名(userText.innerText);
},假);

如果您使用注释//您的代码位于此处将逻辑添加到内部函数，这将限制对 api 的调用。