javascript - JS : Conventional structure for defining a callback function?

Question

我编写了一个简单的函数，它在打印出特定字符串后触发回调函数。在按照我的方式构建回调时，有什么我应该注意的注意事项吗？

此外，如果要对原始函数进行异步处理，最好的方法是什么？

代码:

// Output via console
var message = "hello there";

function typeOut(message, callback = null, i = 0) {
  var interval = setInterval(function() {
    if (i < message.length) {
      console.log(message.substring(0, i + 1));
      i++;
    } else {
      clearInterval(interval);
      callback();
    }
  }, 150);
  //callback;
}

function postDialog() {
  console.log('this is postdialog');
}

typeOut(message, postDialog);

fiddle Here

Answer 1

两个注意事项:

• 不要使用null 作为默认值。这样在调用的时候难免会抛出异常。要么不使用默认值，要求调用者提供一个函数，要么使用一个不为默认值做任何事情的函数(例如 () => {})。
• 按照惯例，回调应该始终是最后一个参数。这使得调用具有长回调的函数更好，因为调用的所有参数都放在同一位置，在延续之上。
  鉴于您的 i 参数也是可选的，这可能不是微不足道的。我能想到的潜在解决方法:
  • 根本不要将 i 设为参数 - 无论如何您都不会使用它。此外，在您“动画化”DOM 节点的真实用例中，为动画节点添加常量前缀也很简单。
  • 重载您的函数以具有多个签名，并根据 typeof 决定第二个参数是 i 还是 callback。不过这确实很乏味。

一般来说，在现代代码库中编写新代码的建议当然是使用 promise 而不是回调!他们将解决上述两个问题:

function delay(ms) {
  return new Promise(res => setTimeout(res, ms));
}
async function typeOut(message, i = 0) {
  while (i < message.length) {
    await delay(150);
    i++;
    console.log(message.slice(0, i));
  }
}

var message = "hello there";
typeOut(message).then(function postDialog() {
  console.log('this is postdialog');
});