美文网首页回调函数
javascript高级-

javascript高级-

作者: 风清扬101 | 来源:发表于2017-08-31 17:03 被阅读70次

    函数类型中,比较常用的是匿名函数和回调函数,一般来说,回调函数是以匿名函数的形式来进行表现的。回调函数在事件监听,异步的执行等,都会用到的是回调函数的作用。
    回调函数的概念
    第一:在js中,函数是个特殊的对象,确实是Function函数的创建的实例,我们可以通过new关键字来进行创建函数,比如:
    var fn = new Function(''num1'',"num2","return (num1 + num2);");
    这样,也就是可以创建函数了。
    传统函数是以传参数的形式,来输入数据,并使用返回语句来进行获取返回值。事实上,在函数的末尾使用return 来返回函数加工好的数据,来作为结束点。函数的传参是作为函数的开始点,这样,一个开始点和一个结束点,来形成一一对应的映射关系。其实函数,就是输入和输出实现过程的映射关系。
    假设,我们在定义函数时,出现函数的执行结果过程比较长,我们是等待函数的执行呢?还是用异步来进行回调执行结果呢?所以,使用回调函数来进行异步的处理就显得是非常重要的了。比如:我们的Ajax请求的回调函数,事件监听的函数,还是我们自定义的函数传参的回调函数都是运用这个机制。
    后续子的逻辑依赖于主干逻辑行为的执行结果。等主干逻辑行为执行完毕,在主逻辑的函数的参数中,是回调函数的执行逻辑代码。如果,一个对象的行为有后续行为的话,我们就可以传入回调函数作为参数,来进行执行后续的逻辑。
    第二 : 我们要注意的是,回调函数是作为主逻辑的参数是可传可不传的,所以,我们要进行健壮性处理,也就是利用逻辑与来进行健壮性的构建。以防止不传回调函数的情况下,出现代码执行错误。
    我们在生活中,也会有这样的执行顺序的。我们不确定的是,主逻辑的执行结果,是什么,就先传入一个回调函数,放到回调函数的下面,来进行执行。在主逻辑中,我们可以传入匿名函数来进行回调,这样,就比较满足我们主逻辑的执行结果后的灵活的执行了。这个是回调函数的主要作用。比较灵活的执行,依赖于主逻辑的执行结果。
    ···
    function fn (num,callback) {
    for (var i = 0;i < num; i++) {
    if ( i > 100) {
    callback && callback();
    }
    }
    };
    ···

     fn (101,function () {
            console.log('想玩什么就玩什么');
    });
    

    2: 异步的执行过程,我们需要回调函数来进行保存我们用ajax请求下来是值。还有新语法的Promise/then,我们都可以用这些来进行使用回调函数。

    仿ES6 Promise
    function Promise () {
    this.takes = [];
    this.error = function () {
    console.log('数据获取失败');
    };

     };
    3 : 通过call方法,来进行Promise构造函数添加方法.
     (function () {
        this.success = function (result) {
            this.complate('success',result);
        };
        this.error = function (result) {
            this.complate('error',result);
        };
        this.complate = function (type,result) {
            if (this.takes.length > 0) {
                this.takes.shift()[type](result);
            };
    
         };
        this.then = function (successHanle,errorHanle) {
            this.takes.push({
                success : successHanle,
                error : errorHanle
            });
            return this;
        };
    
    }).call(Promise.prototype);
    // test实例
      var promise = new Promise();
      function start () {
           在setTimeout延迟定时器中,我们传入一个回调函数。我们可以通过
         setTimeout来延迟其执行函数,进行模拟ajax请求。
         setTimeout (function () {
              promise.success('数据请求成功了');
                 },1000);
                 return promise;        
            };
       var callback1 = function (re) {
          console.log(re);
          promise.error('数据请求失败了');
       };
       var callback2 = function (re) {
           console.log(re);
       }
    4:执行Promise对象
    start().then(callback1,promise.err).then(callback2,promise.err);
    

    这个是回调函数的执行过程,还有事件监听,一旦触发事件,就可以通过回调函数进行事件逻辑的处理或者是操作。这个是比较常见的回调函数的使用场景。事件监听是我们要经常用的是回调函数使用场景。
    6 : 在项目中,我们也经常用到的翻页效果,也经常会回调函数的执行逻辑。

    1 : function myFn (num1,num2,callback) {
    num1 > num2 ? num1 : num2;
    // 执行完比较大小的时候,触发回调函数。
    callback && callback ();
    };
    2 : function myFn2 (max,min,callback) {
    var num = Math.ceil( Math.random()* (max - min) + min);
    callback(num);
    }
    // 调用函数的执行
    myFn2(12,4,function (num2) {
    console.log(num2);
    });
    这些都是我们自定义的回调函数的执行。

    相关文章

      网友评论

        本文标题: javascript高级-

        本文链接:https://www.haomeiwen.com/subject/dqtqdxtx.html