JS回调函数能否返回一个值?

时间:2015-06-18 20:23:27

标签: javascript callback

我完全理解为什么如果回调中的逻辑正在外部服务器上执行或获取某些内容,则回调函数无法返回值。

我不太明白的是,如果回调函数中的所有内容都是正常的同步代码,为什么回调函数不返回值:

var myFunc = function(input, callback){
  var sum = input + 10;
  callback(sum);
};

sum = myFunc(1000, function(input){
  console.log(input);
  return input + 9000;
});
即使sum记录的值为1010,

console.log仍会返回undefined。

回调永远不会返回任何东西是一条硬性规则吗?

并且所有其他语言的回调都不会返回任何内容吗?

修改

这是一个更复杂的例子 - 它也不会返回任何内容

discounts = [

  {
    sku: "126D",
    title: "Discount for using 126",
    discountCode: "LOVE126",
    discountAmount: -2500,
    check: function(orderFormContents, callback) {

      var discountsApplied = orderFormContents.discountsApplied;
      var sqft = orderFormContents.propertyInfo.sqft;

      for (var i = discountsApplied.length - 1; i >= 0; i--) {
        if (discountsApplied[i].discountCode === this.discountCode) {
          if (sqft < 1501) {
            return callback('', 'Coupon Added', this.discountAmount);
          } else {
            return callback('', 'Coupon Added', (this.discountAmount + -2500));
          };
        };
      };

    }
  },

  // additional discount objects in array


];

var checkDiscount = function(code, orderFormContents, allDiscounts) {
  for (var i = allDiscounts.length - 1; i >= 0; i--) {
    if (allDiscounts[i].discountCode === code) {
      allDiscounts[i].check(orderFormContents, function(error, message, amount) {
          var result = {
            "error": error,
            "message": message,
            "amount": amount
          };
          debugger
          return result;
      });
    };
  };
};

var orderFormContents = {
  propertyInfo: {
    sqft: 1000
  },
  discountsApplied: [
    {
      discountCode: "LOVE126"
    }
  ]
};

var discountCode = "LOVE126";

var result = checkDiscount(discountCode, orderFormContents, discounts);
debugger
console.log(result);

1 个答案:

答案 0 :(得分:6)

您错过了myFunc中的退货声明。

var myFunc = function(input, callback){
  var sum = input + 10;
  return callback(sum);
};

sum = myFunc(1000, function(input){
  console.log(input);
  return input + 9000;
});

为了进一步说明,在此示例中,您的回调没有什么特别之处。如果你链接函数,你只需要确保return每个结果。我们可以将当前示例重写为:

function myInnerFunc(sum) {
  return sum + 9000;
}

function myFunc (input){
  var sum = input + 10;
  return myInnerFunc(sum);
}

var sum = myFunc(1000);

但是,JavaScript中的第一类函数的本质允许我们传递函数。这在函数式编程中变得很有趣,其中一个函数现在可以传递各种其他函数以获得不同的结果。

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

function multi (a, b) {
  return a * b;
}

var list = [1, 2, 3, 4, 5];

console.log(list.reduce(add)); // 15
console.log(list.reduce(multi)); // 120

异步操作会在稍后的时间触发它们的回调,因此它们不能立即用于返回值。最简单的例子是setTimeout,它在N毫秒后调用它的回调。在此示例中,myFunc将在setTimeout有机会触发其回调之前很久就返回。相同的逻辑可以应用于AJAX回调。

function myFunc (value) {
  var val;
  window.setTimeout(function () {
    val = value;
  }, 1000)
  return val;
}

var test = myFunc(1000)

console.log(test); // undefined

答案第2部分:Electric Boogaloo

您仍然错过return

这一行

var result = checkDiscount(discountCode, orderFormContents, discounts);

checkDiscount分配结果,但该功能不会返回任何内容。

var checkDiscount = function(code, orderFormContents, allDiscounts) {
  for (var i = allDiscounts.length - 1; i >= 0; i--) {
    if (allDiscounts[i].discountCode === code) {
      allDiscounts[i].check(orderFormContents, function(error, message, amount) {
        var result = {
          "error": error,
          "message": message,
          "amount": amount
        };
        return result;
      });
    }
  }
  // Never returned, default return value is undefined
};

您可以通过正确返回来解决此问题。

var checkDiscount = function(code, orderFormContents, allDiscounts) {
  for (var i = allDiscounts.length - 1; i >= 0; i--) {
    if (allDiscounts[i].discountCode === code) {
      return allDiscounts[i].check(orderFormContents, function(error, message, amount) {
        var result = {
          "error": error,
          "message": message,
          "amount": amount
        };
        return result;
      });
    }
  }
};

老实说,这段代码实际上是循环的,并且最有可能被重构为更简洁的东西。