Difference between higher-order function and callback function

Time:2022-5-13

Today, when I saw the concept of high-order function, I suddenly lost my mind. What’s the difference between this high-order function and callback?

Higher order function is called higher order function in English. So what is a higher-order function?

At the beginning of learning the language, I was most afraid to see this XX function. As soon as I saw it, I wanted to skip it. As a result, I found that I couldn’t understand many knowledge points behind it.
We don’t need to think about it at all. In fact, you have used many high-order functions when you learn this stage, but you didn’t know they had this special name before.
The simplest example is

setTimeout(fn,delay)

If a function a receives another function B as a parameter, then this function a is called a higher-order function and FN is called the callback function of setTimeout.
Remember that the concept of higher-order function and callback function is that the two functions are used together to be called higher-order function and or the callback function of so and so function. A single function fn cannot be called a higher-order function!

[
I wrote a blog about the concept of callback function. If necessary, you can read my personal article. The content is simple and easy to understand without professional terms.] ( https://juejin.cn/post/707734… )

A function can also be a high-order function, that is, the return value is also a function. If you know about anti shake and throttling, you may understand this method at once. The following example has nothing to do with anti shake throttling.
At this point, you can clearly distinguish between high-order functions and callback functions.

Split line, the following is the advanced notes of this concept written by yourself. They are relatively winding. Beginners may not understand the code. Please choose to watch.

<——————————————————>

Difference between higher-order function and callback function

This is a piece of code I wrote. The function I want to achieve is that when I move the mouse to the Li tag, the delete button appears.

Difference between higher-order function and callback function

Difference between higher-order function and callback function

Difference between higher-order function and callback function
The logic is that I need to judge whether the ID of the Li tag is the same as its index, and then change the opacity of the button. What is used here is

Difference between higher-order function and callback function

Difference between higher-order function and callback function
Because I need to pass the ID value of the parameter array to the callback function of onmouseenter, that is, handlemouse, but we need to find out why we write it like this.

Difference between higher-order function and callback function

Whether it is onclick or onchange, a function needs to be used as its callback. Note!These events require you to provide it with a function

onMouseEnter={handleMouse(iterm.id)}

When you write this, you need to understand that when the browser calls the render() function, your handlemouse is the function name, but once you put parentheses, it means you are executing it!!!! This concept is very important and needs to be clarified. So when you come to this line, you will execute this function,
However, if the return value of your function is null or not, you will not get the result you want,Then our purpose is to let the browser first execute a function a (to get the parameters), and then let function a return a function B. at this time, function B is the function that triggers this specific event.

It’s very complicated and needs a lot of understanding.

Difference between higher-order function and callback function

The above code means that when the browser calls the render method, it will execute first

Difference between higher-order function and callback functionIn this code, however, the function a of this code is only to pass in the parameters we need. The real function is the return value of this function a

Difference between higher-order function and callback function

E here is the onmouseenter event object. So far, we have obtained the parameters we need to compare and make logical judgment.