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());