如何暂停一个函数的调用，直到另一个函数被独立调用？

Question

我在下面有工作代码，但我觉得必须有一个更清洁的解决方案，我认为承诺或回调在我的情况下不起作用。

我有一个主函数 (foo)，它在 x 毫秒后独立调用自己（在我的实际代码中，它会重复执行此操作）。当它调用自身时，它会增加一个存储在对象中的值。

我有第二个函数（bar），有时会被随机调用。但是，我希望（在某些情况下）能够暂停此函数的执行，直到下次再次调用主函数（foo）。

在下面的工作示例中，bar 在调用bar 时存储prop 的当前值，然后不断检查prop 的值，直到值发生变化。当值不再是 == 时，bar 执行else 中的代码。这可行，但并不干净，而且如果bar 只是监听prop 更改（或foo 被调用）并在那个时刻执行，那么时间也不准确。

我不相信 promise 或 callback 会起作用，因为它们通常用于将第二个函数作为参数传递的情况。就我而言，我的第二个功能是有另一份工作并且已经在重复做自己的工作。我也不希望再次执行第二个函数，我只想调用它以允许函数一完成自己的执行。

对于我的实际情况，使用延迟也不理想。

更多详情

我的实际程序通过随机触发音频文件播放来制作音乐。 bar() 是确定播放声音的所有方式/属性（持续时间、音量、淡入/淡出等）的函数。

foo() 是一个主函数，它决定程序在歌曲的哪个部分。所以每次调用foo() 时，它都会递增程序/歌曲所处的阶段（即，1、2、3， 4) 它还调用了一些函数，更新属性，改变了get() 函数被允许播放声音的方式。

因此，该程序主要随机播放声音（就像不是在刚性节拍/小节上），我希望在某些情况下能够在小节上播放它们。因为foo() 是跟踪这个时间的函数，所以我向get() 添加了功能，这样当一个节拍上没有触发声音时，它会延迟到指定的节拍发生，然后才允许播放。我有这个功能工作。

当一个声音被分配到一个已经过去的节拍上时，这个技巧就出现了。在这些情况下，我需要暂停 get() 直到下一个小节（即再次调用 foo() 时）。在正常的音乐情况下，时间（每分钟节拍数）将是固定的，这样我就可以简单地进行数学运算并将其设置超时，直到正确的时间。但是，我的程序有点非传统，每次调用foo() 时，持续时间都会发生变化。因此，下一个柱的持续时间是无法提前知道的。

因此，总而言之，bar()（声音）会被调用，其中包含一大堆参数，这些参数决定了声音的播放方式。我需要bar() 在它被调用后暂停，直到它听到/看到foo() 再次被调用，然后才完成播放声音的工作。

这是我的工作示例。

const config = {
  object: {
    prop: 1
  },
};

(function foo() {
  setTimeout(function() {
    config.object.prop = 3;
    console.log('foo changed the value of config.object.prop');
  }, 4000);
})();

bar();

function bar() {

  var prop = config.object.prop;

  (function nar() {
    if (prop == config.object.prop) {
      console.log('sorry, still waiting for config.object.prop to change');
      setTimeout(function() {
        nar();
      }, 1000);
    } else {
      console.log('Executed only after config.object.prop changed!!!');
    }
  })();
}

Answer 1

这是回调和观察者模式的完美用例。

您的主进程应该产生节拍事件，并触发等待它们的函数。

您可以使用一个消息总线框架来帮助您解决这个问题，或者您甚至可以使用一个函数来获得从主进程发生下一个节拍的承诺，但是本土解决方案也可以工作。您只需要一组侦听器函数，bar 将功能的实时部分添加到该列表中，foo 调用（并删除）该列表中的函数。

Answer 2

你可以有一个布尔值来决定每次执行 foo() 时是否应该调用 nar() 并让 bar() 在函数需要运行时将布尔值设置为 true。

let runNar = false;

(function foo() {
  setTimeout(function() {
	if (runNar === true) {
		nar();
		runNar = false;
	}
    console.log('foo changed the value of config.object.prop');
  }, 4000);
})();

bar();

function bar() {
	runNar = true;
};

function nar() {
	console.log('Excuted when foo() is called');
};

Answer 3

也可以使用 Promises 解决，但我认为有更好的解决方案：
使用setters 或Proxy!

它是如何工作的？

• 二传手：
  设置器可以定义不能有值的伪属性，但是如果您尝试设置该属性的值，则会调用一个函数，接收新值作为参数。

语法：

var obj={
  prop:1,
  set anotherProp(value){
    //Handle set:
    this.prop=value
  }
}
obj.anotherProp=5
obj.prop //5

翻译成您的案例：

const config = {
  object: {
    prop: 1,
    set setterProp(value){
      this.prop=value;
      bar()
    }
  },
};

(function foo() {
  setTimeout(function() {
    console.log('foo changed the value of config.object.prop');
    config.object.setterProp = 3;
  }, 4000);
})();

function bar() {
    console.log('Executed only after config.object.prop changed!!!');
}

• 代理： 使用 Proxy 对象，您可以执行 setter 之类的操作，但是：
  1. 代理可用于监视和控制对对象的任何操作（获取、设置、删除、函数调用、类构造等）
  2. 与 setter 不同，Proxy 监视对象的所有属性。

语法：

var obj={
  prop:1
}
var proxy=new Proxy(obj,{
  set:function(obj,prop,value){
    //Handle set:
    obj[prop]=value;
  }
})
proxy.prop=5
proxy.prop //5
obj.prop   //5

翻译成您的案例：

const config = {
  object: {
    prop: 1
  },
};
const proxy=new Proxy(config.object, {
  set: function(obj,prop,value){
    //Handle set:
    obj[prop]=value;
    if(prop==='prop'){bar()};
  }
});
(function foo() {
  setTimeout(function() {
    console.log('foo changed the value of config.object.prop');
    proxy.prop = 3;
  }, 4000);
})();

function bar(){
  console.log('Executed only after config.object.prop changed!!!');
}

好的，但是如果我不想每次都调用 bar 怎么办！

const barList=[]
const config = {
  object: {
    prop: 1
  },
};
const proxy=new Proxy(config.object, {
  set: function(obj,prop,value){
    //Handle set:
    obj[prop]=value;
    if(prop==='prop'){
      barList.filter(x=>{
        bar(...x)
        return false
      })
    };
  }
});
(function foo() {
  setTimeout(function() {
    console.log('foo changed the value of config.object.prop');
    proxy.prop = 3;
  }, 4000);
})();
function callBar(...args){
  barList.push(args)
}
function bar(...argument){
  console.log('Executed only after config.object.prop changed!!!', ...argument);
}
callBar();
callBar('with','some','arguments');