使用回调函数，来确定js函数执行顺序

最新推荐文章于 2025-10-02 20:14:14 发布

原创最新推荐文章于 2025-10-02 20:14:14 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

WEB前端专栏收录该内容

112 篇文章

订阅专栏

本文通过一个具体的示例详细解释了JavaScript中的回调函数(callback)的概念及其使用方式。代码中定义了四个函数：test1, a, b 和 c，通过这些函数的相互调用展示了回调函数的工作原理，有助于理解异步编程的基础。

<html>   
   
<head>   
	<meta charset="utf-8" />

<title>回调函数(callback)</title>   
<script language="javascript" type="text/javascript">   
  

    function test1(){
    	/*
        a(function () {////////
            console.log("pageData-a-after:" + pageData);
            b();
        });
        */
        a(b);
    }

    function a(callback) {
        setTimeout(function () {
            pageData = 'pppp-a';
            console.log("pageData-a-1000:" + pageData);
            var x=1;
            while(x<10000){
            x++;
            console.log("pageData-a-1000:" + x);
            }
            c();
            callback()//////////////
        }, 10);

    }
    function b() {
        console.log("pageData-b:" + pageData);
    }

        function c() {
        console.log("pageData-c:" + pageData);
    }


</script>   
   
</head>   
   
<body>   
<h1>学习js回调函数</h1>   

<button id="btn" onClick=test1()>click me1</button> 
<p>应该能看到调用了两个回调函数</p>   
</body>   
<input type="text" value="" id="input1" />  
</html>