js中的回调函数实例浅析（js回调方法）

本文目录一览：

• 1、js回调函数如何实现异步，给一个例子
• 2、什么是JS回调函数
• 3、Js函数（六） 回调函数和闭包函数 2021-11-21

js回调函数如何实现异步，给一个例子

异步处理不用阻塞来等待处理完成，而是允许后续操作，直至其程序将处理完成，并回调通知此函数

那么在js中有如下几种异步方式：

示例1

var async=function(callback){

    //read data

    setTimeout(function(){

        callback(‘data’);

    },1000);//1秒后回调

};

//使用

async(function(data){

    alert(data);

});

示例2

var async=function(callback){

    var xhr=new XMLHttpRequest();

    xhr.open(‘get’,’.’,true);

    xhr.onreadystatechange=function(){

        callback(xhr.readyStatus);

    };

    xhr.send();

};

async(function(data){

    alert(data);

});

示例3

var async=function(callback){

    var img=new Image();

    img.onload=img.onerror=function(){

        callback(img);

    };

    img.src=’x.jpg’;

};

async(function(data){

    alert(data);

});

什么是JS回调函数

回调函数就是某个函数执行完毕后执行的函数，没什么的啊。比如：

function(callback){

// 代码

// 以上代码执行完毕后执行回调函数

if(typeof callback === “function”){

callback();

}

}

这是因为js中函数可以当做参数直接传递进去。

Js函数（六） 回调函数和闭包函数 2021-11-21

回调函数概念：    函数的参数callback是另一个参数，这个参数在原始数据中执行

例如：

  let arr = [11, 22, 33, 44, 55, 66, 77, 88, 99]

    function liFor(arr, callback) {

        for (let i = 0; i arr.length; i++) {

            if (callback(arr[i])) {

                console.log(arr[i]);

            }

        }

    }

    console.log(‘———遍历数组———-‘);

    liFor(arr, val = true)

    console.log(‘———输出奇数———-‘);

    liFor(arr, val = val % 2 !== 0)

    console.log(‘———输出被3整除———-‘);

    liFor(arr, val = val % 3 === 0)

    console.log(‘———输出被3和6整除———-‘);

    liFor(arr, val = val % 3 === 0 val % 6 === 0)

闭包函数概念：定义一个a方法，在a方法中定义一个b方法，并且b方法里面用到了a方法里面定义的变量，那么此时就形成了闭包函数，由于内部方法里面，用到外部方法里面的变量，外部方法里面的那个变量会一直在内存中存保存着。两个方法嵌套定义，里面的方法，用到了外面方法里面定义的变量，此时这两个方法就形成了闭包。

例如：

function a() {

            console.log(‘a函数被调用了…’);

            let num1 = 100

            let num2 = 200

            function b() {

                console.log(‘b函数被调用了…’);

                console.log(num1 + num2);

            }

            //返回的返回值也是一个函数，那么a函数就是高阶函数。

            return b

        }

        // 通常情况下，函数执行完成后，函数里面定义的变量，会被销毁。

        // a函数，已经调用完毕了，但是a函数里面定义变量，始终在内存中，因为b函数中用到了a函数中定义的变量。

        // 那么此时这两个函数，就称之为：闭包函数。

        let c = a()

        c()

        console.log(‘——————————————‘);

        // 闭包函数的实际案例

        function calc(num1, num2, type) {

            switch (type) {

                case ‘+’:

                    console.log(`${num1}+${num2}=${num1 + num2}`);

                    break;

                case ‘-‘:

                    console.log(`${num1}-${num2}=${num1 – num2}`);

                    break;

            }

        }

        // 在实际开发中，我们在做num1和num2的计算之前，可能需要先做其他事情

        let num1 = 100

        let num2 = 50

            // 在做其他事情的过程中，我们的数据很有可能会被篡改。

        console.log(‘查看用户是否登录’);

        num1 = 555

        num2 = 145

        console.log(‘检查用户的权限’);

        calc(num1, num2, ‘+’) //运行结果不对，因为变量的值被篡改了。

        console.log(‘——————————————‘);

        // 定义一个闭包函数，实现计算器功能

        function myCalc(num1, num2, type) {

            switch (type) {

                case ‘+’:

                    return function() {

                        return num1 + num2

                    }

                case ‘-‘:

                    return function() {

                        return num1 – num2

                    }

            }

        }

        //先准备好你的数据

        let n1 = 100

        let n2 = 50

            //将你的数据传给计算器方法，由计算器方法，返回一个计算方法。

        let js = myCalc(n1, n2, ‘+’)

            //在做具体的计算之前，还先做些其他的事情

        console.log(‘查看用户是否登录’);

        n1 = 555

        n2 = 145

        console.log(‘检查用户的权限’);

        //其他事件准备好了后，执行计算方法

        console.log(js());