jquery의 콜백 함수란 무엇입니까?
- 青灯夜游원래의
- 2022-11-17 20:29:101898검색
jquery에서 콜백 함수는 매개변수로 전달되는 함수입니다. 함수 A는 다른 함수 B에 매개변수(함수 참조)로 전달되고, 이 함수 B는 함수 A를 실행하며, 함수 A는 이름(함수 표현식)이 없으면 콜백 함수라고 합니다. . 콜백 함수를 사용하면 프로그래밍 효율성이 크게 향상되어 현대 프로그래밍에서 널리 사용됩니다.
이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6.1 버전, Dell G3 컴퓨터.
함수도 객체입니다
콜백 함수를 이해하려면 먼저 함수의 규칙을 명확히 이해해야 합니다. JavaScript에서 함수는 이상하지만 실제로는 객체입니다. 정확하게 말하면 함수는 Function() 생성자를 사용하여 생성된 Function 객체입니다. Function 개체에는 함수의 JavaScript 코드가 포함된 문자열이 포함되어 있습니다. C나 Java에서 왔다면 이상하게 보일 수 있습니다. 코드가 어떻게 문자열일 수 있습니까? 하지만 자바스크립트에서는 이런 일이 흔합니다. 데이터와 코드의 구분이 모호합니다.
//可以这样创建函数
var fn = new Function("arg1", "arg2", "return arg1 * arg2;");
fn(2, 3); //6이렇게 하면 코드를 다른 함수에 전달할 수도 있고 일반 변수나 객체를 전달할 수도 있다는 장점이 있습니다(코드는 말 그대로 객체이기 때문입니다).
함수를 콜백으로 전달
함수를 매개변수로 전달하는 것은 쉽습니다.
function fn(arg1, arg2, callback){
var num = Math.ceil(Math.random() * (arg1 - arg2) + arg2);
callback(num); //传递结果
}
fn(10, 20, function(num){
console.log("Callback called! Num: " + num);
}); //结果为10和20之间的随机数번거롭거나 좀 멍청해 보일 수도 있으니 결과를 정상적으로 반환해 보시는 건 어떨까요? 하지만 콜백 함수를 사용해야 한다면 그렇게 생각하지 않을 수도 있습니다!
기존 함수는 매개변수 형식으로 데이터를 입력하고 반환문을 사용하여 값을 반환합니다. 이론적으로 함수의 끝에 return 문이 있는데 구조적으로는 입력 지점과 출력 지점입니다. 이는 이해하기 더 쉽습니다. 함수는 기본적으로 입력과 출력 간의 구현 프로세스를 매핑한 것입니다.
그런데 함수 구현 과정이 너무 길면 함수 처리가 완료될 때까지 기다리나요, 아니면 비동기 처리를 위해 콜백 함수를 사용하나요? 이 경우 AJAX 요청과 같은 콜백 함수를 사용하는 것이 중요합니다. 처리를 위해 콜백 함수를 사용하면 코드는 헛되이 기다리지 않고 다른 작업을 계속 수행할 수 있습니다. 실제 개발에서는 JavaScript에서 비동기 호출이 자주 사용되며 여기서는 적극 권장됩니다!
다음은 AJAX를 사용하여 XML 파일을 로드하고 call() 함수를 사용하여 요청된 객체의 컨텍스트에서 콜백 함수를 호출하는 보다 포괄적인 예입니다.
function fn(url, callback){
var httpRequest; //创建XHR
httpRequest = window.XMLHttpRequest ? new XMLHttpRequest() : //针对IE进行功能性检测
window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : undefined;
httpRequest.onreadystatechange = function(){
if(httpRequest.readystate === 4 && httpRequest.status === 200){ //状态判断
callback.call(httpRequest.responseXML);
}
};
httpRequest.open("GET", url);
httpRequest.send();
}
fn("text.xml", function(){ //调用函数
console.log(this); //此语句后输出
});
console.log("this will run before the above callback."); //此语句先输出 비동기 처리를 요청합니다. 즉, 요청을 시작할 때 완료되면 함수를 호출하라고 지시합니다. 실제 상황에서 onreadystatechange 이벤트 핸들러는 요청 실패 상황도 고려해야 합니다. 여기서는 xml 파일이 존재하고 브라우저에서 성공적으로 로드될 수 있다고 가정합니다. 이 예에서는 비동기 함수가 onreadystatechange 이벤트에 할당되므로 즉시 실행되지 않습니다.
마지막으로 두 번째 console.log 문이 먼저 실행되는데, 요청이 완료될 때까지 콜백 함수가 실행되지 않기 때문입니다.
위의 예는 이해하기 쉽지 않습니다. 다음 예를 살펴보세요.
function foo(){
var a = 10;
return function(){
a *= 2;
return a;
};
}
var f = foo();
f(); //return 20.
f(); //return 40.函数在外部调用，依然可以访问变量a。这都是因为javascript中的作用域是词法性的。函数式运行在定义它们的作用域中（上述例子中的foo内部的作用域），而不是运行此函数的作用域中。只要f被定义在foo中，它就可以访问foo中定义的所有的变量，即便是foo的执行已经结束。因为它的作用域会被保存下来，但也只有返回的那个函数才可以访问这个保存下来的作用域。返回一个内嵌匿名函数是创建闭包最常用的手段。
回调是什么？
看维基的 Callback_(computer_programming) 条目:
In computer programming, a callback is a reference to a piece of executable code that is passed as an argument to other code.
jQuery文档How jQuery Works#Callback_and_Functio...条目：
A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. The special thing about a callback is that functions that appear after the "parent" can execute before the callback executes. Another important thing to know is how to properly pass the callback. This is where I have often forgotten the proper syntax.
百科：回调函数
回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用为调用它所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。
因此，回调本质上是一种设计模式，并且jQuery(包括其他框架)的设计原则遵循了这个模式。
在JavaScript中，回调函数具体的定义为：函数A作为参数(函数引用)传递到另一个函数B中，并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式)，就叫做匿名回调函数。
因此callback 不一定用于异步，一般同步(阻塞)的场景下也经常用到回调，比如要求执行某些操作后执行回调函数。
例子
一个同步(阻塞)中使用回调的例子，目的是在func1代码执行完成后执行func2。
var func1=function(callback){
//do something.
(callback && typeof(callback) === "function") && callback();
}
func1(func2);
var func2=function(){
}异步回调的例子：
$(document).ready(callback);
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$(this).addClass("done");
}).fail(function() { alert("error");
}).always(function() { alert("complete");
});
/**
注意的是，ajax请求确实是异步的,不过这请求是由浏览器新开一个线程请求,当请求的状态变更时,如果先前已设置回调,这异步线程就产生状态变更事件放到 JavaScript引擎的处理队列中等待处理。*/回调什么时候执行
回调函数，一般在同步情境下是最后执行的，而在异步情境下有可能不执行，因为事件没有被触发或者条件不满足。
为什么会需要回调函数
把一个函数作为参数传入到我们的主函数中，让这个函数按照我们的想法顺序进行执行。
我们希望能够在弹出提示信息之后，在我们进行点击确定之后，再执行一个函数内容，这个时候就会用到回调。
因为在程序是非堵塞的，弹出消息之后，在我们还没在弹出框里面进行点击确认或者选择的时候，程序已经执行下面的语句了；
这样我们就没有选择权了，不符合用户习惯，所以我们采用回调函数的方式；
采用了回调函数之后，我们就把callback与主函数体合二为一了，就会是顺序执行了，就可以进行选择和点击确认了。
分开写会导致不能对弹出框进行确认
回调函数作为参数加入到主函数中，可以使得回调在主函数中进行顺序执行，弹出框也就可以正常了。
回调函数的使用场合
资源加载：动态加载js文件后执行回调，加载iframe后执行回调，ajax操作回调，图片加载完成执行回调，AJAX等等。
DOM事件及Node.js事件基于回调机制(Node.js回调可能会出现多层回调嵌套的问题)。
setTimeout的延迟时间为0，这个hack经常被用到，settimeout调用的函数其实就是一个callback的体现
链式调用：链式调用的时候，在赋值器(setter)方法中(或者本身没有返回值的方法中)很容易实现链式调用，而取值器(getter)相对来说不好实现链式调用，因为你需要取值器返回你需要的数据而不是this指针，如果要实现链式方法，可以用回调函数来实现setTimeout、setInterval的函数调用得到其返回值。由于两个函数都是异步的，即：他们的调用时序和程序的主流程是相对独立的，所以没有办法在主体里面等待它们的返回值，它们被打开的时候程序也不会停下来等待，否则也就失去了setTimeout及setInterval的意义了，所以用return已经没有意义，只能使用callback。callback的意义在于将timer执行的结果通知给代理函数进行及时处理。
回调函数的传递
上面说了，要将函数引用或者函数表达式作为参数传递。
$.get('myhtmlpage.html', myCallBack);//这是对的
$.get('myhtmlpage.html', myCallBack('foo', 'bar'));//这是错的，那么要带参数呢？
$.get('myhtmlpage.html', function(){//带参数的使用函数表达式
myCallBack('foo', 'bar');
});另外，最好保证回调存在且必须是函数引用或者函数表达式：(callback && typeof(callback) === "function") && callback();
回调函数的使用示例
例子1
如果不用回调，在alert弹出框之后，我们还没有点击确认的时候，就刷新了，不合常规。
例子2
如果不用回调，ajax与弹出框函数分开写，结果就会是在弹出框之后，我们还没进行点击选择，就已经发送ajax了，然后再弹出弹出框，不符合我们的需求，所以不能这样。
function ops(act,uid) {
callback = {
"ok":function(){
$.ajax({
url:common_ops.buildWebUrl("/account/ops"),
type:'POST',
data:{
act:act,
uid:uid,
},
dataType:'json',
success:function(res){
allback = null;
if(res.code == 200) {
callback =function () {
window.location.reload();
}
}
common_ops.alert(res.msg,callback);
}
});
},
"cancel":function(){
}
};
//记住callback是一个回调函数
//回调函数是作为一个参数在函数中
//然后在函数内部让他运行
common_ops.confirm((act == "remove")?"确定删除吗？":"确定恢复吗？",callback);
//四个参数
//第一个是信息
//第二个是按钮
//第三个是成功的方法
//第四个是失败的方法
confirm:function( msg,callback ){
callback = ( callback != undefined )?callback: { 'ok':null, 'cancel':null };
layer.confirm( msg , {
btn: ['确定','取消']
}, function( index ){
if( typeof callback.ok == "function" ){
callback.ok();
layer.close( index );
}
}, function( index ){
if( typeof callback.cancel == "function" ){
callback.cancel();
layer.close( index );
}
});
},例子3
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<button>按钮</button>
</div>
</body>
</html>
<script src="./jquery-3.6.1.min.js"></script>
<!-- 不用回调的 -->
<!-- <script type="text/javascript">
var object = {
init:function(){
this.eventbind();
},
eventbind:function(){
$("button").click(function(){
alert("111");
})
// 不用回调这边都看不到弹出框，更不要说点击确定了
window.location.reload();
}
}
$(document).ready(function(){
object.init();
})
</script> -->
<!-- 用回调的 -->
<script type="text/javascript">
var back = "回调函数"
function callback(){
alert(back);
window.location.reload();
}
var object = {
main:"主函数",
tanchu:function(msg,callback){
alert(object.main);
if (typeof callback == "function"){
callback();
}
},
}
$(document).ready(function(){
$("button").click(function(){
object.tanchu("信息",callback);
})
})
</script>代码4代码优化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<button id="noback">按钮</button>
<hr>
<button id="hasbac">按钮</button>
</div>
</body>
</html>
<script src="./jquery-3.6.1.min.js"></script>
<!-- 不用回调的 -->
<!-- <script type="text/javascript">
var obje = {
init:function(){
this.eventbind();
},
eventbind:function(){
$("#noback").click(function(){
alert("1");
})
// 还没出现111呢 已经弹出1了
alert("2 没有弹出1 应该先弹出1的");
}
}
$(document).ready(function(){
obje.init();
})
</script> -->
<!-- 用回调的 -->
<script type="text/javascript">
var hasbac = {
main:"主函数",
back:"回调函数",
init:function(){
this.eventbind();
},
eventbind:function(){
// 把callback让入了tanchu方法中，就会顺序执行了
// 如果直接写会导致直接弹出
$("#hasbac").click(function(){
hasbac.tanchu("点击",hasbac.callback);
})
// alert(hasbac.back);
// window.location.reload();
},
// 以下两个就是回调函数的写法
tanchu:function(msg,func){
alert(msg);
alert(hasbac.main);
if (typeof hasbac.callback == "function"){
hasbac.callback();
}
},
callback:function(){
alert(hasbac.back);
window.location.reload();
},
}
$(document).ready(function(){
hasbac.init();
})
</script>总结总述
函数作为参数输入到函数中，在主函数中进行顺序执行，就是回调函数。
【推荐学习：jQuery视频教程、web前端视频】
위 내용은 jquery의 콜백 함수란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!