好的，以下是10个稍微复杂的回调函数的例子，每个例子都有详细的解释。
1. AJAX请求回调函数
```javascript
function getData(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
callback(xhr.responseText);
}
};
xhr.open("GET", url, true);
xhr.send();
}
function handleData(data) {
console.log(data);
}
getData("https://jsonplaceholder.typicode.com/todos/1", handleData);
```
这个函数用于发送AJAX请求。getData函数接收两个参数：url和callback。当请求成功时，回调函数会被调用，并且将返回的数据传递给它。在这个例子中，我们将数据输出到控制台。
2. 定时器回调函数
```javascript
function repeat(func, times, interval) {
var i = 0;
var timer = setInterval(function() {
func();
i++;
if (i === times) {
clearInterval(timer);
}
}, interval);
}
function sayHello() {
console.log("Hello!");
}
repeat(sayHello, 5, 1000);
```
这个函数用于重复执行一个函数。repeat函数接收三个参数：func（要重复执行的函数）、times（执行次数）和interval（间隔时间）。在这个例子中，我们将sayHello函数执行5次，并且每隔1秒钟执行一次。
3. 自己实现的forEach回调函数
```javascript
function forEach(arr, callback) {
for (var i = 0; i < arr.length; i++) {
callback(arr[i], i, arr);
}
}
var arr = [1, 2, 3, 4, 5];
forEach(arr, function(item, index, arr) {
console.log(item, index, arr);
});
```
这个函数用于遍历数组并且执行一个回调函数。forEach函数接收两个参数：arr（要遍历的数组）和callback（每个元素执行的函数）。在这个例子中，我们输出了每个元素的值、索引和整个数组。
4. Promise回调函数
```javascript
function getData(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
resolve(xhr.responseText);
} else {
reject(xhr.statusText);
}
}
};
xhr.open("GET", url, true);
xhr.send();
});
}
getData("https://jsonplaceholder.typicode.com/todos/1")
.then(function(data) {
console.log(data);
})
.catch(function(error) {
console.log(error);
});
```
这个函数使用Promise实现了AJAX请求。getData函数接收一个参数：url。当请求成功时，resolve函数将被调用，并且将返回的数据传递给它。当请求失败时，reject函数将被调用，并且将错误信息传递给它。在这个例子中，我们将数据输出到控制台。
5. 点击事件回调函数
```html
<button id="myButton">Click me</button>
```
```javascript
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
console.log("Button clicked!");
});
```
这个函数用于给按钮添加一个点击事件回调函数。在这个例子中，我们将一个匿名函数作为回调函数，并且在点击按钮时输出一条消息到控制台。
6. Node.js文件读取回调函数
```javascript
var fs = require("fs");
fs.readFile("file.txt", "utf8", function(err, data) {
if (err) throw err;
console.log(data);
});
```
这个函数用于读取文件。readFile函数接收三个参数：文件名、编码格式和回调函数。当文件读取完成后，回调函数将被调用，并且将读取的数据传递给它。在这个例子中，我们将文件的内容输出到控制台。
7. 数组过滤回调函数
```javascript
var arr = [1, 2, 3, 4, 5];
var filteredArr = arr.filter(function(item) {
return item % 2 === 0;
});
console.log(filteredArr);
```
这个函数用于过滤数组。filter函数接收一个参数：每个元素执行的函数。当函数返回true时，该元素将被保留下来。在这个例子中，我们过滤了数组中的偶数，并且将结果输出到控制台。
8. 数组映射回调函数
```javascript
var arr = [1, 2, 3, 4, 5];
var mappedArr = arr.map(function(item) {
return item * 2;
});
console.log(mappedArr);
```
这个函数用于映射数组。map函数接收一个参数：每个元素执行的函数。当函数返回一个新值时，该值将被添加到新的数组中。在这个例子中，我们将数组中的每个元素都乘以2，并且将结果输出到控制台。
9. 数组排序回调函数
```javascript
var arr = [3, 1, 4, 2, 5];
var sortedArr = arr.sort(function(a, b) {
return a - b;
});
console.log(sortedArr);
```
这个函数用于对数组进行排序。sort函数接收一个参数：比较两个元素的函数。当函数返回一个负数时，第一个元素将排在第二个元素前面。在这个例子中，我们将数组按升序排序，并且将结果输出到控制台。
10. 自定义事件回调函数
```javascript
var eventEmitter = new EventEmitter();
eventEmitter.on("myEvent", function(data) {
console.log(data);
});
eventEmitter.emit("myEvent", "Hello!");
```
这个函数用于创建自定义事件。eventEmitter对象有两个方法：on（用于添加事件监听器）和emit（用于触发事件）。在这个例子中，我们添加了一个监听器来监听myEvent事件，并且在事件被触发时，输出传递的数据到控制台。
回调函数是一个常见的编程概念，它可以让我们在异步操作完成后执行一些操作。回调函数通常被作为参数传递给一个函数，当这个函数完成时，回调函数被调用。回调函数可以是一个匿名函数或者一个命名函数。回调函数常见的应用场景包括：AJAX请求、定时器、事件监听器、文件读取等等。理解回调函数需要掌握异步编程的概念，异步编程是指在一个任务执行的过程中可以执行其他任务，而不必等待该任务完成。异步编程的好处是可以提高程序的性能和响应速度。
4656
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
