快捷搜索:  汽车  科技

javascript线程机制和回调(我同事打了一把王者时间)

javascript线程机制和回调(我同事打了一把王者时间)说明:当输出调用 add 函数的时候,js 代码从上到下执行,当遇到异步的 setTimeout 函数的时候,不会等待异步函数,继续往下执行,当执行 console.log(add(10 20)); 的时候,函数没有返回值,所以打印出 undefined。function add(x y){ console.log(1); setTimeout(function(){ console.log(2); var result = x y; return result; } 1000); console.log(3); }; console.log(add(10 20));运行结果:案例二:定义一个函数 add,也是接收两个参数,在这个 add 函数中同时定义了一个 setTimeout 函数,想在一秒

回调函数

定义:回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数。

案例

案例一:定义一个名为 add 的函数,接收两个参数,将这个两个参数相加,作为返回值。当调用这个函数的时候,就可以得到返回值。

function add(x y){ return x y; }; var result = add(10 20); console.log(result);

运行结果:

javascript线程机制和回调(我同事打了一把王者时间)(1)

说明:像上面的 add 函数,可以直接得到返回值。

案例二:定义一个函数 add,也是接收两个参数,在这个 add 函数中同时定义了一个 setTimeout 函数,想在一秒钟之后,返回这两个参数之和。

演示两种获取不到的方法:

第一种:在 setTimeout 中返回结果

function add(x y){ console.log(1); setTimeout(function(){ console.log(2); var result = x y; return result; } 1000); console.log(3); }; console.log(add(10 20));

运行结果:

javascript线程机制和回调(我同事打了一把王者时间)(2)

说明:当输出调用 add 函数的时候,js 代码从上到下执行,当遇到异步的 setTimeout 函数的时候,不会等待异步函数,继续往下执行,当执行 console.log(add(10 20)); 的时候,函数没有返回值,所以打印出 undefined。

第二种:在外层函数定义一个 result 变量,在 setTimeout 函数里进行赋值。

function add(x y){ var result = 0; setTimeout(function(){ result = x y; } 1000); return result; }; console.log(add(20 20));

运行结果:

javascript线程机制和回调(我同事打了一把王者时间)(3)

说明:js 代码按照顺序执行,当执行到 setTimeout 的时候,不会等待,继续往下执行,所以 result 还是 0。

正确的获取方式:通过定义回调函数获取

function add(x y callback){ setTimeout(function(){ var result = x y; callback(result); } 1000); }; add(30 20 function(result){ console.log(result); });

运行结果:

javascript线程机制和回调(我同事打了一把王者时间)(4)

说明:add 函数中的 callback,只是起的名称,意思是 回调函数,在输出调用 add 函数的时候,传了 x,y 和 一个函数,其实就是将函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用时,就是去找 function(result){console.log(result)}。所以在调用add 函数的时候,代码按照正常顺序执行,过了 1 秒之后,执行 setTimeout 里的函数,执行到 callback 的时候,会去执行function(result){console.log(result)}。

路漫漫其修远兮,吾将上下而求索

译文:在追寻真理方面,前方的道路还很漫长,但我将百折不挠,不遗余力地去追求和探索。

如果您有什么好的想法与方法,欢迎在评论区留言,我们一起讨论~

猜您喜欢: