javascript疑难问题---11、回调函数

转载

mob604756e5abbc 2020-03-19 07:19:00

文章标签 javascript疑难问题回调函数 html jquery ajax 文章分类 代码人生

javascript疑难问题---11、回调函数

一、总结

一句话总结：

回调函数是你定义了的，但是你没有直接调用，但是最终它执行了(在特定条件或时刻)的函数

1、常见的回调函数有哪些？

比如DOM事件函数、定时器函数、ajax回调函数等等

二、回调函数

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>回调函数</title>
 6 </head>
 7 <body>
 8 <!--
 9 1. 什么函数才是回调函数?
10   * 你定义的
11   * 你没有直接调用
12   * 但最终它执行了(在特定条件或时刻)
13 2. 常见的回调函数?
14   * DOM事件函数
15   * 定时器函数
16   * ajax回调函数
17   等等
18 -->
19 
20 
21 <!--1、 DOM事件函数-->
22 <!--<button id="btn">btn1</button>-->
23 <!--<script>-->
24 <!--    var btn = document.getElementById('btn')-->
25 <!--    btn.onclick = function () {-->
26 <!--        alert(this.innerHTML)-->
27 <!--    };-->
28 
29 <!--    // (function () {-->
30 <!--    //     alert('this.innerHTML')-->
31 <!--    // })();-->
32 <!--</script>-->
33 
34 <!--2、jquery事件-->
35 <!--<button id="btn2">btn2</button>-->
36 <!--<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>-->
37 <!--<script>-->
38 <!--    //注意到click方法中是一个函数而不是一个变量-->
39 <!--    //它就是回调函数-->
40 <!--    $("#btn2").click(function() {-->
41 <!--        alert("Btn2 Clicked");-->
42 <!--    });-->
43 <!--</script>-->
44 
45 <!--3、arr.forEach-->
46 <!--<script>-->
47 <!--    var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];-->
48 <!--    arr.forEach(function(value , index , arr){-->
49 <!--        console.log(index+' . '+value);-->
50 <!--        //console.log('回调函数被执行了');-->
51 <!--    });-->
52 <!--</script>-->
53 
54 <!--4、定时器函数-->
55 <!--<script>-->
56 <!--    setInterval(function () {-->
57 <!--        console.log('到点啦!')-->
58 <!--    }, 2000);-->
59 <!--</script>-->
60 
61 <!--5、ajax函数-->
62 <!--<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>-->
63 <!--<script>-->
64 <!--    $.ajax({-->
65 <!--        url: "test.html",-->
66 <!--        context: document.body,-->
67 <!--        success: function(){-->
68 <!--            alert('调用成功');-->
69 <!--        },-->
70 <!--        error:function () {-->
71 <!--            alert('调用失败');-->
72 <!--        }-->
73 <!--    });-->
74 <!--</script>-->
75 
76 <!--6、排序函数-->
77 <!--<script>-->
78 <!--    arr = [5,4,2,11,3,6,8,7];-->
79 <!--    //arr.sort();-->
80 <!--    //-->
81 <!--    arr.sort(function(a,b){-->
82 <!--        //升序排列-->
83 <!--        return a - b;-->
84 
85 <!--        //降序排列-->
86 <!--        //return b - a;-->
87 <!--    });-->
88 <!--    console.log(arr);-->
89 <!--</script>-->
90 
91 </body>
92 </html>