在学习Three.js的过程中，遇到了一个有趣的现象

在制作动画渲染过程中，我们需要在渲染循环函数中使用 requestAnimationFrame.

function render(){
        requestAnimationFrame(render);
        cube.rotateY(0.02);
        cube.rotateY(0.01);
        renderer.render(scene,camera);
}

requestAnimationFrame会告诉浏览器你有那些东西想要做动画。 传入一个函数作为回调函数。我们这里的函数是render

js中函数可以作为参数传递

再看下面的两段代码：

function say (value) {
     alert(value); 
} 

function execute (someFunction, value) {
     someFunction(value); 
} 

execute(say, 'hi js.');

与

function execute (someFunction, value) {
     someFunction(value); 
} 
execute( function (value) { alert( value );}, 'hi js.');

上面第一段代码是将say方法作为参数传递给execute方法 
第二段代码则是直接将匿名函数作为参数传递给execute方法

再如

未使用回调函数

  let cale=function(num1,num2,calcType){

  if(calcType==="add"){
      return num1+num2;
  }else if(calcType==="multiply"){
      return num1*num2;
     }
  }

  console.log(cale(2,3,'add'));//5

使用回调函数

  let add=function(a,b){
      return a+b;
  }

  let multiply=function(a,b){
      return a*b;
  }

  let calc=function(num1,num2,callback){
      return callback(num1,num2);
  }

  console.log(calc(2,3,add));//5

上面，回调函数即指add()和multiply(),而函数calc()执行了add()和multiply()具有共同操作的一部分

回调函数应用场景多用在使用 js 写组件时，尤其是组件的事件很多都需要回调函数的支持。