将回调推迟到事件的最佳方法

如果我们在某些情况下需要推迟回调并在事件发生时稍后调用它，您会有什么建议？目前有几个排队模块，但我还没有找到一个，它们满足这个要求。我的意思是，在任务完成之前，不要在队列中运行任务。当有合适的参数值或回调时，您可以运行它们。例如

<html>
<body>
<input type="text" id="id1">
<input type="text" id="id2">
<script type="text/javascript">
    document.getElementById("id1")
        .addEventListener("keydown", function (e) {
            if (e.keyCode === 13) {
                upper(e.target.value);
            }
        });
    document.getElementById("id2")
        .addEventListener("keydown", function (e) {
            if (e.keyCode === 13) {
                delayed(e.target.value);
            }
        });
    function upper(x){
        if (parseInt(x) == x) {
            next_level(x, function(y){
                alert(y);
            });
        } else {
                alert('not int');
        }
    }
    function next_level(x, callback){
        y = Math.random() * 10;
        if (y < x){
            callback(y);
        } else {
            // postpone callback till y comes from id2 
            // put it into a queue
        }
    }
    function delayed(y){
        // take 1st element/callback from the queue
        // call it with y
        // if queue is empty, do nothing  
    }
</script>
</body>
</html>

已编辑

我已经编辑了代码。这更类似于您的代码示例，但我仍然不确定我是否确切了解所需的行为是什么。如果这是错误的，请告诉我是否有评论。

document.getElementById("id1")
  .addEventListener("keydown", function (e) {
    if (e.keyCode === 13) {
      upper(e.target.value);
    }
  });
document.getElementById("id2")
  .addEventListener("keydown", function (e) {
    if (e.keyCode === 13) {
      delayed(e.target.value);
    }
  });
function upper(x){
  if (parseInt(x) == x) {
    next_level(x, function(y){
      console.log(y);
    });
  } else {
    console.log('not int');
  }
}
const queue = [];
function next_level(x, callback){
  var y = Math.floor(Math.random() * 10);
  if (y < x){
    callback(y);
  } else {
    queue.push(callback);
    // postpone callback till y comes from id2 
    // put it into a queue
  }
}
function delayed(y){
  if (queue.length > 0) {
    const cb = queue.shift();
    cb(y);
  }
}

<input type="text" id="id1" />
<input type="text" id="id2" />

请检查我的jsFiddle。它类似于 amcdrmtt 的答案，我试图在代码中解释会发生什么。

function next_level(x, callback){
  y = Math.random() * 10;
  if (y < x){
    callback(y);
  } else {
    // postpone callback till y comes from id2 
    // put it into a queue
    addToQueue(callback);
  }
}
// queue for callback methods
var queue = [];
// remember the callback for later
function addToQueue(func){
   queue.push(func); // add a method that calls func with the original arguments
    outputDiv.innerHTML += "<div>callback added to queue. queue length:" + queue.length + "</div>";
}
// call the last callback with a new value y
function delayed(y){
   // if queue is empty, do nothing
   if (queue.length === 0) {
    return;
   }
  // take 1st element/callback from the queue
  var firstCallback = queue.shift(); // also remove it from the queue
  // call it with y
  firstCallback(y);
}

https://jsfiddle.net/7pfzvL0d/4/

相关内容

最新更新

热门标签：