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

Posted 2023-03-29

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

那么在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);
);

参考技术A

异步清楚嘛？

当一个函数执行需要很久的时候JS就会异步执行下一个函数，而不会等当前函数执行完再执行下面的函数

回调函数：

回调函数呢就是为了防止这样而在一个函数执行完之前不让程序先去执行下面的函数，因为下面的函数可能需要上面执行函数的返回值，所以才出来了回调函数。

其实回调也是个函数如果这个回调函数仍然需要很久的话那么也会产生异步。所以就是说回调函数执行时间过久，JS就会直接执行下面的函数而不会执行回调函数。这么说好理解了吧~例子呢就用

settimeout做演示就行了~用延时来代替等待时间就可以了(用ajax做示例)~

(function()
$.ajax(
    url:"123.json",
    success:function(msg)
        setTimeout(alert(msg),3000);
    
)

这个就是回调函数异步执行了~会先弹出先执行，然后再弹出msg的内容~

Node.js回调函数

Node.js异步编程的直接体现就是回调。

异步编程依托于回调来实现，但是不能说使用了回调后程序就异步话了，回调函数在完成任务之后会被调用，Node使用了大量的回调函数，Node所以的API都是支持回调函数的。如下是阻塞和非阻塞的例子。

阻塞代码实例：

首先创建一个文件input.txt,如下内容：

这个是一个测试文件，O(∩_∩)O哈哈哈~。

创建main.js,代码如下：

var fs=require("fs");

var data=fs.readFileSync(‘input.txt’)；

console.log(data.toString());

console.log("the program  execute to the end");

非阻塞代码：

main.js的代码：

fs=require(‘input.txt‘);

fs.readFile(‘input.txt‘,function(error,data){

if(error)return console.error(error);

console.log(data.toString());

});

console.log("the program  execute to the end");