zoukankan      html  css  js  c++  java
  • #简单理解回调函数

    如果,一个程序这样执行:

    console.log("hello world!");
    
    setTimeout(()=>{
    	console.log("执行setTimeout完毕。")
    },2000);
    

    会输出这样的结果:

    $ node index.js
    hello world!
    执行setTimeout完毕。
    

    那是所有学过js的人都能够理解的。它将依照js从上之下顺序执行的规则,先输出hello world! -- 等待2s -- 输出执行setTimeout完毕。

    但是,如果我们希望先执行setTimeout,待其执行完毕再打印hello world!应该怎么办?

    如果你这样尝试:

    setTimeout(()=>{
    	console.log("执行setTimeout完毕。")
    },2000);
    
    console.log("hello world!");
    

    显然是达不到我们的目的的,它还是会像上面那样输出。

    之所以会出现这个问题,并不是说程序的执行不是从上到下,依次执行,只不过setTimeout函数,是异步执行函数,参看[Node.js中的异步到底是个啥?,其实也是用回调函数来实现的,这里不必深究,完全可以把它当作,setTimeout函数就是后执行的。

    为了解决这样一种问题,才有了回调函数的概念

    其实,回调函数并不是什么新的技术,只是一种提炼化的思想。

    我们可以简单的理解为,回调函数,就是回头调用。

    那么实现我们上面说的需求,就可以这样去实现。

    //定义函数1
    function helloWorld(){
    	console.log("hello world!");
    }
    
    //定义函数2
    function trigger (callbackFunc){
    	setTimeout(()=>{
    	console.log("执行setTimeout完毕。");
    		//执行函数1
            callbackFunc()
    },2000);
    	
    }
    
    //执行函数2
    trigger(helloWorld);
    
    $ node index.js
    执行setTimeout完毕。
    hello world!
    

    我们先是创建了一个函数1:helloWorld,然后,创建函数2:trigger。 其中,我们再给函数2定义的时候,定义了一个形参,然后再调用函数2的时候,把函数1作为参数传入函数2。 然后,再函数2中,我们把函数1也放在 了setTimeout中去执行,这样,就实现了先打印“执行setTimeout完毕。” 后打印"hello world!"

    其实,我们可以发现,这和下面这段函数好像没有啥本质区别。

    function trigger (){
    	setTimeout(()=>{
    	console.log("执行setTimeout完毕。");
    	console.log("hello world!");
    },2000);
    }
    
    trigger();
    

    实际上,就是没有本质区别。

    如果,你还是觉得似乎哪里不好理解,那你再看看下面这种写法:

    function helloWorld(){
    	console.log("hello world!");
    }
    
    function trigger (){
    	setTimeout(()=>{
    	console.log("执行setTimeout完毕。");
    	helloWorld()
    },2000);
    	
    }
    
    trigger();
    
    

    执行函数trigger(),然后在trigger的函数体中去调用helloWorld,这和上面的所谓回调函数,有区别吗?

    只不过是把被调用的函数作为一个参数传递进了函数体而已。所以再看文章开头这句话 “我们可以简单的理解为,回调函数,就是回头调用。”,其实,不就是我们天天在写的调用吗?

    但是,它有没有被注意的地方? 当然有。在我们实际的开发工作中,代码块可不都是一行console.log()就完事了,所以这里才看起来似乎没有必要。把函数作为参数去传入其它函数体去调用这种思想即回调,使得我们的代码更加的简洁,并且,很多情况下,可以传入不同的函数去调用,这样使得我们的代码会更加的灵活,实现代码复用。

    不然,很可能你写的代码都是这样的:

    这是谁写的呢。。。。emmm。。。。

  • 相关阅读:
    The following untracked working tree files would be overwritten by merge
    如何删除git远程仓库项目的所有内容,重新提交所有内容
    Vue中引入bootstrap导致的CSS问题
    CSS实现垂直居中
    RESTful三问
    SAPUI5 freestyle vs SAP Fiori Elements —— 两种开发SAPUI5 Apps的方式对比
    团队1
    用户规格说明书
    MElv2.kkkK
    ME.kkkK
  • 原文地址:https://www.cnblogs.com/jaycethanks/p/13060590.html
Copyright © 2011-2022 走看看