Javascript 在interval上调用的函数访问全局变量

我正在异步接收数据（从每秒0到100点），这些数据被传递给高启动成本函数extendTraces（data），该函数更新用户界面。如果在生成每个点时调用extendTraces（），则用户界面将变得无响应。我发现定期调用函数并向其传递一个点数组，称之为pointArray，效率更高

//inside asynchronous function
pointArray.push(point);

我可以跟踪添加到pointArray的点数，并每隔20次调用extendTraces（pointArray）：

//inside asynchronous function
pointArray.push(point);
if (this.pointArray.length == 20){
    (<any>Plotly).extendTraces(this.pointArray);
    this.resetPointArray();
}

---

我是js新手，想知道我是否使用了正确的范例来完成这项任务。我看到了很多关于回调和承诺的信息，但我并不完全理解，但我怀疑我没有使用它们是做错了什么。来自C++的，我关心的是，在StEATION中定义的函数和接收点的异步函数，都有两个函数，它们都可以访问没有任何硬编码互斥体的PoxTray. 您应该创建一个去盎司函数，这基本上限制了调用该函数的频率。下面是下划线库中的去盎司函数：

//返回一个函数，该函数只要继续被调用，就不会被调用
//被触发。函数停止调用后将被调用
//N毫秒。如果传递了'immediate'，则在
//前缘，而不是后缘。
_.debounce=函数（func、wait、immediate）{
var超时，结果；
var later=函数（上下文，参数）{
超时=空；
如果（args）结果=函数应用（上下文，args）；
};
var debounced=重新辩论（函数（args）{
if（超时）cleartimout（超时）；
如果（立即）{
var callNow=！超时；
超时=设置超时（稍后，等待）；
如果（callNow）结果=函数应用（此参数为args）；
}否则{
timeout=\延迟（稍后，wait，this，args）；
}
返回结果；
});
debounced.cancel=函数（）{
clearTimeout（超时）；
超时=空；
};
退场；
};

现在只需将extendTraces函数包装在debounce函数周围，然后调用从该函数返回的函数

---

来源：

您应该创建一个去盎司函数，这基本上限制了调用该函数的频率。下面是下划线库中的去盎司函数：

//返回一个函数，该函数只要继续被调用，就不会被调用
//被触发。函数停止调用后将被调用
//N毫秒。如果传递了'immediate'，则在
//前缘，而不是后缘。
_.debounce=函数（func、wait、immediate）{
var超时，结果；
var later=函数（上下文，参数）{
超时=空；
如果（args）结果=函数应用（上下文，args）；
};
var debounced=重新辩论（函数（args）{
if（超时）cleartimout（超时）；
如果（立即）{
var callNow=！超时；
超时=设置超时（稍后，等待）；
如果（callNow）结果=函数应用（此参数为args）；
}否则{
timeout=\延迟（稍后，wait，this，args）；
}
返回结果；
});
debounced.cancel=函数（）{
clearTimeout（超时）；
超时=空；
};
退场；
};

现在只需将extendTraces函数包装在debounce函数周围，然后调用从该函数返回的函数

---

来源：

我很想将逻辑封装到它自己的类中，在这个类中，它只允许您指定

• 经过多少次添加才能调用该方法
• 多长时间不活动后才能调用该方法
• 要调用的方法

函数PointHandler（flushSize、flushTime、flushCallback）{
var pointArray=[]；
var lastFlush=setTimeout（（）=>this.flush（），flushTime）
this.addPoint=函数（点）{
pointArray.push（点）；
if（pointArray.length==flushSize）{
这个。flush（）；
}
清除超时（最后刷新）
lastFlush=setTimeout（（）=>this.flush（），flushTime）；
}
this.flush=函数（）{
flushCallback（点数组）；
pointArray=[]；
清除超时（最后刷新）
lastFlush=setTimeout（（）=>this.flush（），flushTime）；
}
}
var handler=newpointhandler（105000，points=>console.log（points））；
document.getElementById（“clickme”）.addEventListener（“click”，（）=>handler.addPoint（new Date（））
addpoint
我会尝试将逻辑封装到它自己的类中，在这个类中，它只允许您指定


经过多少次添加才能调用该方法
多长时间不活动后才能调用该方法
要调用的方法


函数PointHandler（flushSize、flushTime、flushCallback）{
var pointArray=[]；
var lastFlush=setTimeout（（）=>this.flush（），flushTime）
this.addPoint=函数（点）{
pointArray.push（点）；
if（pointArray.length==flushSize）{
这个。flush（）；
}
清除超时（最后刷新）
lastFlush=setTimeout（（）=>this.flush（），flushTime）；
}
this.flush=函数（）{
flushCallback（点数组）；
pointArray=[]；
清除超时（最后刷新）
lastFlush=setTimeout（（）=>this.flush（），flushTime）；
}
}
var handler=newpointhandler（105000，points=>console.log（points））；
document.getElementById（“clickme”）.addEventListener（“click”，（）=>handler.addPoint（new Date（））
添加点
问题是什么？毫无疑问，这是一个基于意见的问题。如果您的代码对您或您的团队有效且可维护，那么其他人认为您如何完成任务并不重要。我想知道定期调用依赖于异步更新变量的函数的正确模式。问题是什么？毫无疑问，这是一个基于意见的问题。如果您的代码对您或您的团队有效且可维护，那么它就不存在了
//inside asynchronous function
pointArray.push(point);