Kasan Blog

异步 & 同步

异步: 无需等待结果,获得结果的方式可以通过回调或轮调。

同步: 要等待结果产生,结果不产生就一直等待,直到结果产生。

回调 & 轮调

轮调是指周期性地访问结果是否已经产生,一般不用。

回调是指,回头调用函数,获得结果,这里的回头跟(”回头我请你吃饭”)的回头是一个意思,是指在将来的某个时间回头调用函数,这个事件由浏览器决定

回调 (callback) 是作为参数传递给另一个函数的函数

回调 (callback) 是函数1作为参数传递给另一个函数2的函数1

这种技术允许函数调用另一个函数

回调函数可以在另一个函数完成后运行

回调

function f1(){
    console.log('hi')
}

function f2(fn){
    fn();
}

f2(f1);

几个问题:

  1. 是否直接调用了f1() //否
  2. f1传给f2(别人)了没有 //是
  3. f2调用了f1? //是
  4. f1是不是我写给f2调用的函数 //是
  5. 所以,f1 是回调。

结论就是:我写的函数我不直接用,我传给其他地方调用,这就是回调


大致判断同步或异步

  1. setTimeout
  2. AJAX(即XMLHttPRequest)
  3. AddEventListener
  4. 这三个东西内部,那么这个函数就是异步函数
  5. 等等

AJAX绝不能设置成同步,因为这样会令页面卡住,不能操作。


问题

下面这个是一个异步函数/异步任务
因为function 掷骰子没有return 真正需要的return在箭头函数里
实际是没有console.log的真正演示的代码是没有console.log
这里写是为了能运行而且解释异步的条件


function 掷骰子(){
    setTimeout(() => {
       return console.log(parseInt(Math.random() * 6) + 1)  //1秒后返回6以内包括6的随机整数(掷骰子)
    }, 1000);
}

//相当于
function xxx(){
    setTimeout(() => {
        return console.log(parseInt(Math.random() * 6) + 1)  //1秒后返回6以内包括6的随机整数(掷骰子)
    }, 1000);
}

function zzz(fn){   
    fn();  
}

zzz(xxx)
这是没有console.log的异步代码运行下面的代码是不会打印出任何东西的
所以现在要解释用回调的方式获得结果


function 掷骰子(){
    setTimeout(() => {
       return parseInt(Math.random() * 6) + 1 
    }, 1000);
}


//可以改为:
function 掷骰子(fn){
    setTimeout(() => {
      fn(parseInt(Math.random() * 6) + 1 )
    }, 1000);
}

掷骰子((x)=>{console.log(x)}); //回调,函数作为参数传给另一函数
//当形参只有一个的时候,可以直接简写为 ↓
掷骰子(console.log);


问题来了

parseInt() mdn

map() mdn

//map需要调用一个函数,map会把每一个数组的元素传给调用的函数使用
//parseInt是把字符串变成一个整数数字
const array = ["1","2","3"].map(parseInt)
console.log(array) //1,NaN,NaN

这个问题是因为当传的形参超过1个而且没有做好形参的处理就会污染函数
得到错误的结果所以需要清楚函数有多少形参

map(function(currentValue, index, array){})
map(接受一个函数(当前元素当前元素下标数组)=>{})

parseInt(string,radix)
parseInt(字符串,进制数)

现在得知了形参的数量和用法就可以理解为什么会出现 1,NaN,NaN这种结果了

相当于 parseInt() 接受了来自map传的3个形参 而因为parseInt()只接收两个形参

所以是
parseInt("1",0) //如果传0,当无效参数,结果是1
parseInt("2",1) //传1,意思是把"2"作为1进制的数作为解析,因为一进制只有0,所以用一进制解析"2",它不是一个数字,显示为NaN
parseInt("3",2)//传2.意思是把"3"作为2进制的数作为解析,因为二进制没有3,所以用二进制解析"3",它不是一个数字,显示为NaN


所以正确的方式应该是

const array = ["1","2","3"].map((item,index,arr)=>{return parseInt(item)})
console.log(array)

或者
const array = ["1","2","3"].map((item)=>{return parseInt(item)})
console.log(array)