Simon Cheng

How Callback Works

Sun, 17 Aug 2025 00:00:00 +0000

Understanding Callback Functions in JavaScript (Made Simple)

When people first hear about callback functions, they often get confused. The term sounds fancy, but the concept is actually straightforward once you break it down. Let’s go step by step.

What Is a Callback Function?

A callback function is simply a function that you pass as an argument to another function. The receiving function can then decide when to call (or “call back”) that function.

👉 Think of it like giving someone your phone number. They’re not calling you right away. Instead, you’re saying:
“Here’s my number. Call me back later when you have news.”

That’s exactly what a callback is in programming:

You pass a function (your phone number).
The other function saves it.
It “calls back” that function at the right time.

Passing Functions as Arguments

In JavaScript, functions are first-class citizens. This means you can treat them like any other variable — you can assign them to variables, pass them around, and use them as arguments.

function greet(name) {
  console.log("Hello, " + name);
}

function processUserInput(callback) {
  const name = "Alice";
  callback(name);  // call the function passed in
}

processUserInput(greet);
// Output: Hello, Alice

Here, greet is not executed immediately when we pass it to processUserInput.
Instead, its reference is passed (basically, the memory address where the function lives).
Later, inside processUserInput, the function gets invoked with callback(name).

Regular Functions vs Callback Functions

You can think about it like this:

Regular function → Takes data as input and always applies the same method to process it.
Callback function → Lets you change the method itself. You’re basically passing an algorithm (a function) into another function, so the same data can be processed in different ways.

Example:

function processNumbers(numbers, callback) {
  return numbers.map(callback);
}

const numbers = [1, 2, 3];

// Double each number
console.log(processNumbers(numbers, num => num * 2));
// [2, 4, 6]

// Square each number
console.log(processNumbers(numbers, num => num * num));
// [1, 4, 9]

Here, the same data (numbers) is processed differently depending on which callback you provide.

Why Do We Need Callbacks?

The real power of callbacks comes with asynchronous operations.

JavaScript is single-threaded — it can’t do everything at once. But things like:

Reading a file,
Making a network request,
Querying a database,

all take time. If the program paused and waited for these to finish, everything would freeze!

Instead, JavaScript says:

“I’ll start this operation.”
“When it’s done, I’ll call back the function you gave me.”

That’s how we achieve non-blocking, delayed execution.

Example with

console.log("Start");

setTimeout(() => {
  console.log("This runs later!");
}, 2000);

console.log("End");

Output:

Start
End
This runs later!

Notice how the callback inside setTimeout only runs after 2 seconds — not immediately.

Key Point: Reference vs Execution

When you pass a function as an argument, you’re passing its reference, not its result.

By passing the reference, the receiving function gets control over when to execute it.

Final Thoughts

Callbacks may seem tricky at first, but they’re just functions passed around like variables. The magic happens because the receiving function can choose when to run them — immediately, later, or only if certain conditions are met.

Once you really get this idea, you’ll see callbacks everywhere in JavaScript — and you’ll understand why they’re such an important building block for async programming.

How Event Loop Works

Sat, 19 Aug 2023 00:00:00 +0000

What is event loop

The Event Loop is an important concept in JavaScript runtime environments, particularly in browsers and Node.js. It manages the execution order of asynchronous operations, callback functions, and events. We could say event loop is actually a mechanism , with this mechanism enables JavaScript to handle asynchronous operations within a single thread while maintaining relatively good performance and responsiveness.

Although there are some differences in the event loop between Node.js and browsers, the core concept remains similar. Understanding the event loop is crucial for writing efficient, non-blocking JavaScript code, especially when dealing with numerous I/O operations and asynchronous tasks.

How Event Loop works

When running an program in browser, the computer not only help us create a heap and call stack for us, where we used running our code, we can also call it main thread, but also create two queues, one of them is Web API, another is Event Queue, and task queue and microtask queue are included in Event Queue.

Web API
Event Queue: for all those asynchronous task should be in event queue, waiting to be called
- macro task queue
- microtask queue 1. First of all, main thread would execute the code from top to bottom, if meet any asynchronous task, just put it into Web API to monitor, will not prevent the main thread to run the synchronous code from top to bottom.

When any monitored asynchronous task in WEB API is ready to run, it won’t execute immediately, instead was moved to Event Queue to wait to be called.
- There are 2 queues in Event Queue depends on micro task or macro task (task)
- First-In-First-Out, who first comes into the queue would be first called in their own task queue.
- So, for many timer tasks, we do set up a timer. However, when the scheduled time is reached, it doesn’t necessarily run immediately. The scheduled time merely places the task in the queue, waiting its turn, rather than executing it immediately.
- Microtasks always take priority over macro tasks
When all synchronous tasks have been executed and completed, the main thread becomes available. The microtask queue is then processed on the main thread if there are microtasks in the micro queue, they are executed one by one. If there are no microtasks, the event loop checks for any pending macro tasks in the task queue and executes them. After processing one macro tasks, the event loop returns to the microtask queue to check if there are any remaining microtasks. This emphasizes that microtasks always take priority over macro tasks. Macro tasks are executed only when the microtask queue is empty. For those tasks of the same level are processed in a first-in-first-out manner.

Micro or Macro

Macro tasks (Macrotasks):

setTimeout and setInterval: Timer tasks.
I/O operations: Such as file read/write, network requests.
Page rendering: Updating DOM elements.
User interaction events: Clicks, inputs, etc.
Event callbacks: Handling event listeners.
Request animation frame: requestAnimationFrame.

Micro tasks (Microtasks):

Promise’s then and catch: Handling the results of Promise objects.
async/await: Code following await is treated as a microtask after the Promise is resolved.
MutationObserver: Observing DOM changes.
queueMicrotask: Adding a task to the microtask queue.

Key points to note:

Micro tasks are executed immediately after the current macro task finishes. They have a higher priority.
Micro tasks are commonly used to handle Promise results and other tasks that need to be executed as soon as possible within the current event loop.
Macro tasks are executed after micro tasks, only when the current task queue is empty.

Please keep in mind that the list provided is not exhaustive, and the specific macro tasks and micro tasks may vary depending on the JavaScript runtime environment (such as browsers, Node.js). Understanding the execution order of macro tasks and micro tasks is crucial for writing effective asynchronous code.

Reference

https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

English

Tue, 01 Aug 2023 00:00:00 +0000

[TOC]

English at work

English at work is aim to help you to improve the efficiency and ability in the communication at work. Save you much time to understand what is really need at work. Sometimes a good communication is really necessary and important for solving a challenging problem.

表示目前还不理解，详细研究之后，有问题再问

I'm not quite clear on this issue yet. I would like to examine it more closely, and if I have any further questions, I'll get back to you

表示你会调查问题并尽快回复对方。这句话传达了你对问题的关注，并表示你会尽快提供答复或解决方案

I will look into the issue and get back to you ASAP.

我们稍后联系，讨论细节。

Let's touch base later to discuss the details.

我会调查并给您提供一个解决方案

I'll look into that and get back to you with a solution.

请问能否给我提供一下项目的最新进展？

Could you please provide me with an update on the project?

我们需要在截止日期前完成，所以让我们根据任务的优先级进行安排

We need to meet the deadline, so let's prioritize our tasks accordingly.

我正在处理另一个项目，但我会抽出时间帮助您处理您的请求。

I'm currently working on another project, but I'll make time to assist you with your request.

让我们安排一个会议，详细讨论此事

Let's schedule a meeting to discuss this matter in more detail.

我们面临一些技术问题，但我们正在积极解决

We're facing some technical issues, but we're actively working on resolving them.

我将在今天结束前发送给您报告

I'll send you the report by the end of the day.

让我们在团队会议上集思广益，为即将到来的项目提出创意。

Let's brainstorm ideas for the upcoming project during our team meeting.

技术上可行，但不确定业务上是否可行

Technically possible but uncertain in terms of business logic.

我有些大概的想法

I have some rough ideas on this.I'd love to hear your thoughts on this

我发现/觉得这个有点难度

I'm finding it really challenging

The vast majority(大多数) of React projects will use the JSX code and build process that transforms it. Nonetheless(虽热如此), you should know that you technically don’t need JSX

什么是 RESTful API？它的特点是什么？

Separate API into logical resources, endpoints should be resources_based(nouns) and use HTTP methods for actions. and also is stateless, all state is handled on the client. This means that each request must contain all the information necessary to process a certain request. The server should not have to remember previous requests. and usually send data as JSON.
请解释一下数据库事务，并说明在什么情况下应该使用事务。
- When you need to complete multiple operations together, ensuring that they either all succeed or all get rolled back.
- When multiple people are accessing the database simultaneously, using a transaction can prevent data from getting messed up.
- When you need to make sure complex operations or business logic either fully take effect or fully get canceled.
In short, a database transaction is a way to ensure the correctness of database operations, like a secure set of actions that either happen together or don’t happen at all. This ensures data consistency and reliability.
请解释关系型数据库和非关系型数据库的区别，并提供一些常见的示例。

Support for strict data consistency and transaction processing, suitable for complex relational data. Suitable for applications requiring high consistency and strong transaction support, such as financial systems and enterprise-level applications.(MySQL,Oracle,SQL Server)

Support for higher scalability, suitable for large-scale distributed systems. In some cases, they sacrifice consistency for better performance and availability. Suitable for applications requiring handling large volumes of data and high concurrency, such as social media and big data analytics.（MongoDB，Redis）
什么是索引？为什么在数据库表中使用索引是有益的？

An index in a database is a data structure that enhances the speed of data retrieval from a database table. Think of an index as a table of contents in a book – it provides a quick way to locate data without having to scan the entire table. Using indexes in database tables is beneficial for several reasons:
1. Accelerated Data Retrieval: Indexes can significantly speed up data retrieval. By creating indexes on columns, the database can quickly locate rows that match specific conditions without scanning the entire table.
2. Reduced Query Cost: Indexes lessen the workload required for queries, especially in large tables. They can notably decrease the time complexity of queries, thus improving the responsiveness of the database system.
3. Optimized Sorting and Grouping: Indexes enhance the efficiency of sorting and grouping operations. The database can use indexes to avoid sorting or grouping the entire table, focusing only on the indexed data.
4. Faster Join Operations: Indexes expedite join operations when multiple tables are involved. They allow the database to swiftly locate rows that match join conditions, reducing the time taken for join operations.
5. Enforced Uniqueness: In some cases, unique indexes can be created on columns to enforce data uniqueness. This prevents duplicate data from entering the table.
In conclusion, using indexes in database tables can significantly enhance query performance, but it’s important to weigh the pros and cons, select appropriate columns for indexing, and ensure efficient database operation based on the specific context.
请解释一下 REST 和 SOAP 的区别。

REST (Representational State Transfer): REST is an architectural style based on resources, emphasizing organizing and accessing data in a manner similar to resources on the web. Each resource is uniquely identified by a URL, and standard HTTP methods (GET, POST, PUT, DELETE, etc.) are used to access and manipulate them. REST services commonly use data formats like JSON or XML.

SOAP (Simple Object Access Protocol): SOAP is a protocol designed to support communication between different systems. It defines a standardized message format and communication pattern, facilitating interaction between different platforms and programming languages. SOAP messages are often enveloped within the body of HTTP or other protocol messages and typically use XML for structuring data.

Transmission:
- REST commonly employs native HTTP methods for communication, while SOAP messages are typically transferred via HTTP, SMTP, or other protocols. SOAP messages are wrapped within HTTP or other protocol messages.
Data Format:
- REST often uses JSON for data exchange due to its lightweight nature and readability.
- SOAP uses XML to encapsulate data with well-defined structures and tags.
State Management:
- REST is stateless, requiring each request to carry enough context information for the server to understand it. State is usually maintained on the client side.
- SOAP can manage state using various mechanisms, potentially retaining some state information during communication.
Flexibility and Complexity:
- REST is simpler and more flexible, making it well-suited for lightweight and mobile applications. It’s typically easier to implement and maintain.
- SOAP offers greater functionality and security, making it suitable for complex enterprise applications and integration scenarios. However, it’s also more complex and heavyweight.
什么是微服务架构？它有哪些优点和缺点？
请解释一下负载均衡是如何工作的，并提供一些常见的负载均衡算法。
什么是哈希表（Hash Table）？它在算法和数据结构中的作用是什么？
请解释一下分布式系统的概念，并说明它与单机系统的区别。
请解释一下消息队列的概念，并说明它在应用程序开发中的作用。
什么是反向代理？它与正向代理有何区别？
请解释一下 OAuth 2.0 的工作原理，并说明它在身份验证和授权中的应用。

https://zhuanlan.zhihu.com/p/92051359
请解释一下 SQL 注入攻击是如何发生的，以及如何防止它。
什么是缓存？请描述一下缓存的工作原理，并说明在应用程序中使用缓存的优点。
请解释一下面向对象编程（Object-Oriented Programming）的概念，并说明它的核心原则。这些问题涵盖了后端开发中的一些基本概念和常见话题。确保你理解每个问题，并能够清晰地表达你的答案。此外，还要准备其他与你所申请的职位相关的问题，以便在面试过程中展示你的技能和经验。

An utility function that wraps async functions to handle errors

Sat, 29 Jul 2023 00:00:00 +0000

Handle errors with try…catch

In Node.js, you can use try...catch blocks to handle exceptions (errors) that might occur during the execution of your code. When using an async function, you’ll notice that await only captures the value of a successful promise, making it unable to capture the failure results of the catch method execution. As a result, in async functions, we commonly employ the try...catch structure to handle errors. Whenever an error occurs within the try block, the code execution pauses, and the catch block captures the error. Hence, it’s a common practice to combine async functions with try...catch.

CatchAsync function

However, utilizing the try...catch structure within each individual async function can be cumbersome and lead to messy code structure. To address this, we can create a catchAsync function that wraps and captures errors for asynchronous functions.

module.exports = fn => {       
    return (req, res, next)=>{ 
        fn(req, res, next).catch(next);  
    };
};

In above: catch(next) === catch(err => next(err))

module.exports = fn => {       
    return (req, res, next)=>{ 
        fn(req, res, next).catch(err => next(err));  
    };
};

1.module.exports: This is a Node.js construct used to export functionality from a module. In this case, the module is exporting a function.

2.(req, res, next) => { ... }: This is an Express.js middleware function. It takes three arguments: req (request), res (response), and next (next is actually a function in the chain). It wraps the async function and handles any errors that may occur.

3.fn(req, res, next): This line executes the original async function (fn) and passes the request, response, and next middleware function to it.

4..catch(err => next(err)): This is where the error handling takes place. If the async function’s promise rejects (throws an error), the .catch block captures the error (err) and passes it to the next middleware function, it will trigger the error-handling middleware rather than proceeding to the next regular middleware in the chain.

Summary

In summary, the module.exports code defines a utility function that wraps async functions to handle errors and pass them to the next middleware. This can be used in an Express.js application to simplify error handling in asynchronous routes and middleware. To use this utility, you can require it in your code and apply it to your async route or middleware functions.

Parallel and series in JavaScript

Tue, 25 Jul 2023 00:00:00 +0000

参考文档

promise的并行

array.map( function(currentElement, index, arr){} ) ： map() creates a new array from calling a function for every array element.
当只有第一个参数currentElement的时候，可以写成箭头函数的形式 map（t => {return }），此处涉及到箭头函数简写 t => {return } 。
函数通过为数组每一个element调用一个函数，将计算结果返回一个新的数组，在上例子中， map（t => { return ()=>{ return } ）,在map调用的函数当中，返回一个函数(函数会返回函数)
会返回一个新的函数放进数组当中，并且这些新的函数会返回一个promise，此时fnarr是一个新的函数数组，这样可以用fnarr数组再次调用map函数时，就会调用fnarr数组的元素本身（因为此时元素本身就是一个函数）

const fnarr = [0, 1, 2, 3, 4, 5].map(t => {
  return () => {
    return new Promise(resolve => {
      setTimeout(() => {
        console.log(`promise${t}`)
        resolve(t)
      }, t * 1000)
    })
  }
})

fnarr 是一个包含多个函数的数组，每个函数返回一个 Promise 对象。当使用 map 方法对 fnarr 进行遍历，并对每个函数执行调用 fn()，返回一个 Promise 对象的数组。然后，使用 Promise.all 方法来等待所有的 Promise 对象完成。一旦所有的 Promise 对象都解析（成功），then 方法中的回调函数将会被执行，并接收一个包含所有 Promise 解析值的数组 resArr。可以看到，尽管所有的Promise是并行执行的，但是在promise当中打印返回的结果是按照顺序排列的，这一点在某些场景下很有用。

Promise.all(fnarr.map(fn => fn())).then(resArr => {
  console.log(resArr)
})

打印结果:

// 0s后
promise0
// 1s后
promise1
// 2s后
promise2
// 3s后
promise3
// 4s后
promise4
// 5s后
promise5
// 当所有promise执行完后返回所有的结果
[0, 1, 2, 3, 4, 5]

promise的串行

既然要求串行，首先想到的是async/await实现:

async function run() {
  for (let i = 0; i < fnarr.length; i++) {
    const result = await fnarr[i]()
    console.log(i, result)
  }
}

run()

打印结果：

// 0s后
0 0
// 1s后
1 1
// 2s后
2 2
// 3s后
3 3
// 4s后
4 4
// 5s后
5 5

promise的串行和并行

利用上面的知识，我们现在有一个需求：

可以并发发送请求；这样代码在多个异步处理之后一起执行，而不是一个一个去执行。
可以控制并发的数量：就是先发几个请求等这几个请求的结果回来后，在发另外的请求；

思路：并发可以使用Promise.all，而控制并发的数量，相当于是串行，可以使用async+await来做。

分组：把所有的请求按照并发数量进行分组
分组之后，那么就一组一组地按照顺序执行，即串行，使用async+await
将request分组，小组与小组之间是串行，而组内请求是并行

组间串行

首先分组，把所有的请求按照并发数量进行分组,这个函数可以将一个数组按照指定的max大小进行分组，返回一个新的二维数组，其中每个子数组最多包含max个元素。

const group = (list = [], max = 0) => {
  if (!list.length) {
    return list;
  }
  let results = [];
  for (let i = 0, len = list.length; i < len; i += max) {
    results.push(list.slice(i, i + max));
  }
  return results;
};

组内并行

分组之后，那么就一组一组的执行，即串行，使用async+await

async function sendRequest(requests = [], max = 0, callback = () => {}) {
  if (!requests.length) {
    return requests
  }
  const groupRequest = group(requests, max)
  const results = []
  // groupItems是一个小组，groupRequst是所有的小组，这样让小组与小组之间的请求是串行，而组内的请求是并行的。
  for (let groupItems of groupRequest) {
    const result = await requestHandler(groupItems, callback) //组内并行，组间串行
    results.push(result)
  }
  console.log('done', results)
  return results
}

groupItems是一个小组，小组内并行

async function requestHandler(groupItems, callback = () => {}) {
  if (!groupItems.length) {
    callback()
    return groupItems
  }
  const promiseArr = groupItems.map(fn => fn())
  const data = await Promise.allSettled(promiseArr).then(resArr => {
    resArr.map(callback)//这里callback，等待输入函数，输入的函数可以打印所有的promise的value的值
    return resArr
  })
  return data
}

const p1 = () => new Promise((resolve, reject) => setTimeout(resolve, 1000, 'p1'))
const p2 = () => Promise.resolve('p2')
const p3 = () => new Promise((resolve, reject) => setTimeout(resolve, 2000, 'p3'))
const p4 = () => Promise.resolve('p4')
const p5 = () => new Promise((resolve, reject) => setTimeout(resolve, 2000, 'p5'))
const p6 = () => Promise.resolve('p6')
const p7 = () => new Promise((resolve, reject) => setTimeout(resolve, 1000, 'p7'))
const p8 = () => Promise.resolve('p8')
const p9 = () => new Promise((resolve, reject) => setTimeout(reject, 1000, 'p9'))

const arr = [p1, p2, p3, p4, p5, p6, p7, p8, p9]

sendRequest(arr, 3, ({ reason, value }) => {
    console.log(value || reason)
})

打印结果:

// 3个为一组，每组都必须要请求结束
p1
p2
p3
// 3个为一组，每组都必须要请求结束
p4
p5
p6
// 3个为一组，每组都必须要请求结束
p7
p8
p9
// 最后的结果result
done [
  [
    { status: 'fulfilled', value: 'p1' },
    { status: 'fulfilled', value: 'p2' },
    { status: 'fulfilled', value: 'p3' }
  ],
  [
    { status: 'fulfilled', value: 'p4' },
    { status: 'fulfilled', value: 'p5' },
    { status: 'fulfilled', value: 'p6' }
  ],
  [
    { status: 'fulfilled', value: 'p7' },
    { status: 'fulfilled', value: 'p8' },
    { status: 'rejected', reason: 'p9' }
  ]
]

Promise.allSettled是一个新的API，跟Promise.all差不多的用法，也是接受的数组，不过不同的是Promise.allSettled会等所有任务结束之后才会返回结果，而Promise.all只要有一个reject就会返回结果。

同时Promise.allSettled返回的结果也有些不同：

如果对应的 promise 已经 fulfilled，返回 { status: ‘fulfilled’, value: value }
如果相应的 promise 已经被 rejected，返回 {status: ‘rejected’， reason: reason }

PS： setTimeout第三个参数的作用是给回调函数传入参数，如下

for (var i = 0; i<4; i++) {
  setTimeout((i) => {
    console.log(i)
  }, 1000, i)
}

PS：Async.js (https://caolan.github.io/async/)：Async.js是一个功能强大的实用工具库，提供了许多用于处理异步JavaScript的函数。它包括async.series、async.parallel等函数，可用于按顺序或并行执行任务。

How to debug NodeJS

Wed, 18 Jan 2023 00:00:00 +0000

Default debugging process

The default debugging process of NodeJS (read Node.js) is quite clumsy. You are likely already aware of the need to add --inspect to the node script with node inspector. It is also dependent on Chrome. Then you have to look at the proper web socket connection which is hard, and debug using Chrome’s node debugger. To be honest, it is a pain in the neck.

Finally, Google chrome labs has released ndb, which they say is “An improved debugging experience for Node.js, enabled by Chrome DevTools”. Ndb is a boon when debugging a Nodejs app.

1. Getting started, install ndb

Installing ndb is very easy. All you need to do to get started debugging your nodejs application is to install ndb. I would suggest that you install it globally with:

npm i ndb –save-dev

You can also install and use it locally per app if you want. One thing I had to fix was to get the latest version of Chrome, as I saw some permission issues.

2. Run the app with ndb (not node or nodemon)

For debugging nodejs applications with ndb, you can directly run the nodejs app script with ndb rather than node. For example, if you were used to doing node index.js or nodemon index.js in development. To debug your app you can run:

"scripts": {
  "debug": "ndb app.js"
},

ndb app.js

Notice that you don’t need to put any -- inspect so the experience is a lot smoother. You don’t need to remember a different port or go to chrome devtools and open up a different inspector window to debug. Such a relief!

ndb opens up a screen like below when you do ndb . or ndb index.js

Please add a breakpoint on line 46. As you have run the application with ndb it will run in debug mode and stop at the breakpoint like below when you hit http://localhost:8080/api/convert/USD/AUD/2019-01-01 on the browser.

ndb allows you to run any script for debugging. For example, I can run ndb npm start and it will use the nodemon run. This means I can debug the application while changing the code which is great.

As an example it can be run with ndb npm start to debug this NodeJS express application.

3. Let’s debug some code

Reference

https://www.freecodecamp.org/news/how-to-get-started-debugging-nodejs-applications-with-ndb-a37e8747dbba/