<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>回调函数</title>
</head>
<body style="width:100%;height:100%;">
<div class="box">
box1
</div>
<div class="spance">
asdfsdfsdafsdfs
</div>
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1.什么是回调函数
//2.什么是同步回调和异步回调
//3.NODE里面的异步
//函数式编程:因为function是内置对象，我们可以将它作为参数传递给另一个函数，延迟到函数中执行，甚至执行后将它返回。这是在JavaScript中使用回调函数的精髓。
//回调函数 <Callbacks>: 也是一种模式，回调模式
// 我们在JavaScript中经常使用回调函数时注意以下几点，尤其是现在的web应用开发，在第三方库和框架中
//
// 异步执行(例如读文件，发送HTTP请求)
// 事件监听和处理
// 设置超时和时间间隔的方法
// 通用化：代码简洁
// 回调函数应用场景多用在使用 js 写组件时，尤其是组件的事件很多都需要回调函数的支持。
$(window).on('click', function(){
});
var ary = [1, 2, 3, 4, 5, 6];
ary.forEach(function(item, index){
//console.log(item, index);
});
//回调函数
var clh = '常连海';
var tools = {
removeDom: function(ele, callback) {
ele.parentNode.removeChild(ele);
var x = 10;
if (typeof callback === 'function') {
window.setTimeout(function(){
callback(x, clh); //这里是重点， 传入参数
}, 1000);
}
}
}
$(window).on('click', function(){
tools.removeDom(document.querySelector('.box'), function(num){ //这里在次接收参数
$('.spance').css('background-color','#f00');
console.log(num);
console.log(clh);
});
});
//回调函数
function fn(num, callback) {
var x = 1;
if (typeof callback === 'function') {
callback(x);
}
}
fn(10, function(x1){
console.log(x1);
});
//回调函数
//https://segmentfault.com/a/1190000009391074
var callback = function(arg3) {
console.log('callback Totle is:' + arg3)
};
var fn1 = function(arg1, arg2, callback) {
var total = arg1 + arg2;
callback && callback(total); //---->>这里是顺序执行，执行完毕callback之后才往下执行，不是异步执行 <同步回调>
console.log('mainFunction Totle is:' + total);
};
fn1(1, 2, callback); //---->> callback Totle is:3 mainFunction Totle is:3
//NODE异步
//同步回调和异步回调
var fs = require('fs');
fr.readFile('input.txt', function(err, data){
if (err) console.log(err);
console.log(data.toString());
});
console.log("程序执行结束!");
// 上面例子中我们先创建了一个文件input.txt，里面的内容是:'我们来测试一下异步回调函数'如果按照同步的思维，程序应该执行fs.readFile，
// 直到文件读完之后才执行后面的console.log("程序执行结束!"); 然而node中的fs.readFile是支持异步处理的，
// 因此程序执行到这儿的时候并不会阻塞，而是继续向后执行，当文件读取完毕之后再自动调用传入的匿名回调函数，因此出现了上面的结果。
// JS里面用的最多的应该是作为事件的处理器。即当一个事件发生时，用来响应事件的函数。比如：
//
// 当AJAX请求成功时，你要用回调函数读取响应数据。
// 当按钮被点击时，你要用回调函数执行对应的逻辑。
// 实际上，setTimeout和setInterval的回调函数也可以看作是事件处理器，对应“时间到”这个事件。
//
// 数组的map、forEach方法的回调函数也是如此。
//
// JS的世界就是一个事件的世界。
</script>
</body>
</html>
网友评论