> 웹 프론트엔드 > JS 튜토리얼 > js의 콜백 함수 심층 분석 (자세한 설명 공유)

js의 콜백 함수 심층 분석 (자세한 설명 공유)

奋力向前
풀어 주다: 2021-09-17 10:53:09
앞으로
2263명이 탐색했습니다.

이전 글 "js(코드 포함)의 이 포인팅 문제를 설명하는 글"에서 js의 이 포인팅 문제에 대해 소개했습니다. 다음 글에서는 js의 콜백 함수에 대해 자세히 설명합니다. 살펴보세요.

js의 콜백 함수 심층 분석 (자세한 설명 공유)

JS 콜백 함수 상세 설명

JS 콜백 함수

콜백 함수란 무엇인가요? 공식적인 설명: 프로그램이 실행될 때 일반적인 상황에서는 응용 프로그램이 API를 통해 라이브러리를 호출하는 경우가 많습니다. 미리 준비된 기능. 그러나 일부 라이브러리 함수는 대상 작업을 완료하기 위해 적절한 시간에 호출될 수 있도록 애플리케이션이 먼저 함수를 전달하도록 요구합니다. 전달되어 나중에 호출되는 함수를 콜백 함수라고 합니다.

보통 B 함수를 다른 함수 A에 전달하고 필요할 때 함수 A를 호출합니다. B传入另一个函数A,并且在 需要的时候再调用函数A。

说白了,回调就是回溯,先定义好将要使用的函数体,然后在使用使再调用这个函数,我们通常把callback作为一个参数传入先定义的那个函数。下面我们先来看一段jquery代码:

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
로그인 후 복사

上面jquery就是一个回调函数,首先它在执行完hide效果后,接着调用function回调函数。

我们再来看一段JS代码,看看回调函数是如何实现的:

function Buy(name,goods1,callback) {
    alert(name+' buy '+goods1);
    if(callback&&typeof(callback)==="function")
        callback();
}
Buy('xiaoming','apple',function(){
    alert("shopping finish");
});
로그인 후 복사

一个很简单的代码,一开始不知道要买啥,等到买到东西,立即把之前定义好的函数调用出来,最好加上判断规则,因为一切前提是callback必须是一个函数,输出结果为:

xiaoming buy apple
shopping finish
로그인 후 복사

闭包与回调

下面看一道闭包的题目,分别点击第一个和第四个节点,执行结果:

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
    nodes[i].addEventListener(&#39;click&#39;, function() {
        console.log(&#39;You clicked element #&#39; + i);
   });
}
로그인 후 복사

这里虽然主要考的是闭包,addEventListener是一个闭包,而匿名函数是一个回调函数,i是在闭包中的变量。在addEventListener的回调执行时,循环已经结束,此时的变量i被赋值为node.lengthnode.length为总节点数。所以结果就是

You clicked element # node.length
로그인 후 복사

那要怎么改,将其返回值改成函数,既然i变量的值会被释放,那我们就引入i,让每次循环的值都保存在内存中,就可以了:

var nodes = document.getElementsByTagName(&#39;button&#39;);
for (var i = 0; i < nodes.length; i++) {
(function(i) {
    nodes[i].addEventListener(&#39;click&#39;, function () {
        console.log(&#39;You clicked element #&#39; + i);
        })
       })(i);
}
로그인 후 복사

PHP回调函数

下面略说一下php中回调函数如何实现(结果为1,2,3,4):

<?php
    $array=array(1,2,3,4);
    array_walk($array,function($value){
        echo $value;});
?>
로그인 후 복사

php对每个传入的数组元素作回调处理,下面再看看php的闭包,使用use

직접 말하면 콜백은 먼저 사용할 함수 본문을 정의한 다음 사용 후 이 함수를 호출합니다. 일반적으로 먼저 정의된 함수에 콜백을 매개 변수로 전달합니다. 먼저 jquery 코드를 살펴보겠습니다.

<?php
    function getcouter(){
        $i=0
        return function() use($i)(
            echo $i;
        )};
    }
    $counter=getcounter();
    echo $counter();
    echo $counter();
?>
로그인 후 복사

위의 jquery는 콜백 함수입니다. 먼저 hide 효과를 실행한 후 함수를 호출합니다. </ code> 콜백 함수. <p></p>콜백 기능이 어떻게 구현되었는지 다시 JS 코드를 살펴보겠습니다. <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">1,1</pre><div class="contentsignin">로그인 후 복사</div></div></p>아주 간단한 코드입니다. 처음에는 무엇을 사고 싶은지 알 수 없습니다. 마지막으로 판단 규칙을 추가하는 것이 좋습니다. <code>콜백은 함수여야 하고 출력 결과는 다음과 같기 때문입니다.

class hello {
function callback($a,$b) {
echo "$a,$b";
}
static function callback($c,$d){
echo "$c,$d";        
}
}
//将类名作为参数
call_user_func(array(&#39;hello&#39;,&#39;callback&#39;),"hello","world");
//输出 hello,world
//将对象作为参数
call_user_func(array(new hello(),&#39;callback&#39;),"hello","world");
//将静态方法作为参数
call_user_func(hello::callback,"hello","world");
//输出 hello,world
로그인 후 복사
Closure and callback🎜🎜봅시다 클로저에 대한 질문에서 각각 첫 번째 노드와 네 번째 노드를 클릭하면 실행 결과: 🎜rrreee🎜 여기서 주요 테스트는 클로저이지만 addEventListener는 클로저이고 익명 함수는 콜백입니다. 함수, i는 클로저 변수에 있습니다. addEventListener의 콜백이 실행되면 루프가 종료됩니다. 이때 변수 i에는 node.length, node.length는 총 노드 수입니다. 그럼 결과는 🎜rrreee🎜어떻게 바꾸나요? 반환 값을 함수로 변경하면 i 변수의 값이 해제되므로 각 루프의 값이 변경되도록 <code>i를 소개하겠습니다. 메모리에 저장됩니다. 🎜rrreee🎜PHP 콜백 함수🎜🎜 PHP에서 콜백 함수를 구현하는 방법에 대해 간략하게 설명하겠습니다(결과는 1, 2, 3, 4입니다). 🎜rrreee🎜php는 각 수신에 대해 작동합니다. 배열 요소 콜백 처리를 위해 PHP 클로저를 살펴보겠습니다. use 키워드를 사용하여 범위 외부의 변수를 상속합니다. 🎜rrreee🎜 반환 결과는 다음과 같습니다. 🎜rrreee🎜공식 PHP 사용 방법🎜rrreee🎜 사실 원리만 보면 JS와 PHP는 둘 다 함수를 먼저 정의하고 필요할 때 호출하는 방식이 비슷하다고 합니다. 🎜🎜추천 학습: 🎜JS 비디오 튜토리얼🎜🎜

위 내용은 js의 콜백 함수 심층 분석 (자세한 설명 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
js
원천:juejin.im
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿