javascript - 使用 setTimeout 时从函数返回值

Question

有什么方法可以让函数使用 setTimeout 运行并返回分配给变量的值吗？

我的意思的一个例子是这样的:

function count(start, target) {
  if (start < target) {
    start += 0.1;
    return start;
  } else if (start > target) {
    return target;
  }
  // i'm fully aware the return above will prevent this line occur
  // this is my issue currently
  setTimeout(function () {
    count(start, target)
  }, 1000);
}

var el = document.getElementById('test');
var value = count(0.0, 1.0); //get the opacity value

function check() {
  el.style.opacity = value; //assign what the value is in this moment
  if (value != 1.0) {
    setTimeout(check, 0);
  }
}

check();

我知道这段代码不会按照我想要的方式工作，因为 return exit 是函数，我编写它是为了解释我想要做什么。

我想以这种方式执行此操作的原因是因为我有一个元素，我想通过改变它的不透明度来淡入。

所以我有一个函数，它可以使用我想要的缓动将起始值增加到目标值，然后返回将分配给元素的不透明度属性的所述值。

我不想将元素传递给这个 count 函数，因为这意味着当我想要为元素之外的其他内容设置动画时，它会限制它的使用。

这个问题的解决方案是什么？

Answer 1

我认为您想要做的是，如果为 start 和 target 传递的值不是，则再次调用 count 方法如果是的话也一样

function count(start, target) {
    var ret;

    if (start < target) {
        ret = start + 0.1;
    } else if (start > target) {
        ret = target;
    }

    if (start != target) {
        setTimeout(function () {
            count(ret, target)
        }, 1000);
    }
    return ret;
}