在 Javascript 中类样式对象的实例之后运行回调

Question

我正在接受别人的代码，不确定我是否要以正确的方式做某事。

有一个跟踪器"类"(基本上只是一个函数的对象，包括一个"初始值设定项")。

该类将调用第三方库。

返回结果后应发生回调。

这是我正在尝试做的：

var tracker = Tracking.initialize({
prod: 'OurProduct',
requiredLayoutKeys: ["scr"],
requiredInteractiveKeys: ["name", "action"],
maxQueueSize: 5,
timeToSend: 5000,
});
// this code should happen in the callback once tracker is initialized:
InitSessionInfo(
{sid: tracker.__sid, product: tracker.prod},
function (returnObj) {
setSessionIP(tracker.getIP(),function(returnObj){
OurApp.auth(function (user) {
OurApp.initialize(user);
});
});
});

以下是跟踪对象在单独文件中的外观：

var Tracking = {
__required_layout_keys: null,
__required_interactive_keys: null,
__maxQueueSize: null,
__timeToSend: null,
__initialized: false,
initialize: function(config){
Tracking.__initialized = true;
Tracking.__required_interactive_keys = config.requiredInteractiveKeys;
Tracking.__required_layout_keys = config.requiredLayoutKeys;
Tracking.__maxQueueSize = config.maxQueueSize;
Tracking.__timeToSend = config.timeToSend;
Tracking.__bid = '';
Tracking.__sid = '';
Tracking.__ua = '';
// get user data from FingerPrintJs2. 
// The callback needs to happen after these results are returned: 
new Fingerprint2().get(function(result, components){
var ua = components.find(function(item){
return item.key === "user_agent";
});
Tracking.__bid = result;
Tracking.__sid = result + "." + Date.now();
Tracking.__ua = ua.value;
});
},
// there are other functions here that return ip, etc.
}

不幸的是，"跟踪器"总是以未定义的形式返回。

更新：

在此处粘贴调试器时：

var tracker = Tracking.initialize({
prod: 'OurProduct',
requiredLayoutKeys: ["scr"],
requiredInteractiveKeys: ["name", "action"],
maxQueueSize: 5,
timeToSend: 5000,
});
debugger;

跟踪器的值为"未定义"，并且跟踪的值尚未设置其"sid"值。

跟踪中的更新：

var Tracking = {
...
initialize: function(){
...
return new Fingerprint2().get(function(result, components){
var ua = components.find(function(item){
return item.key === "user_agent";
});
Tracking.__bid = result;
Tracking.__sid = result + "." + Date.now();
Tracking.__ua = ua.value;
return Tracking;
});

}

Answer 1

因此，fingerprintjs2(在一系列内部函数调用的深处)返回一个setTimeout，这本质上是异步的，但不幸的是，默认情况下您无法链接。通过查看setTimeout中的代码，您可以看到它正在调用超时完成后传递给get()函数的函数，因此您可以利用它的承诺来确保事情在应该发生的时候发生。

你要做的是用 promise 包装new Fingerprint2().get()调用，然后在你传递给get函数的 "done"函数(在 setTimeout 中调用的函数)中解析该承诺。

然后，您可以从Tracking对象中的initialize函数返回 promise，以便可以链接它并在数据成功初始化/更新后执行操作。

ES6 Promise & Chaining Docs

工作演示

使用承诺对象的 ES6 版本

var Tracking = {
__required_layout_keys: null,
__required_interactive_keys: null,
__maxQueueSize: null,
__timeToSend: null,
__initialized: false,
initialize: function(config){
Tracking.__initialized = true;
Tracking.__required_interactive_keys = config.requiredInteractiveKeys;
Tracking.__required_layout_keys = config.requiredLayoutKeys;
Tracking.__maxQueueSize = config.maxQueueSize;
Tracking.__timeToSend = config.timeToSend;
Tracking.__bid = '';
Tracking.__sid = '';
Tracking.__ua = '';
// get user data from FingerPrintJs2. 
// The callback needs to happen after these results are returned: 
// return the promise so we can chain
return new Promise(function (resolve, reject) {
new Fingerprint2().get(function(result, components){
var ua = components.find(function(item){
return item.key === "user_agent";
});
Tracking.__bid = result;
Tracking.__sid = result + "." + Date.now();
Tracking.__ua = ua.value;
resolve(Tracking); // resolve promise with updated Tracking obj
});
});
},
// there are other functions here that return ip, etc.
};
var tracker = null;
Tracking.initialize({
prod: 'OurProduct',
requiredLayoutKeys: ["scr"],
requiredInteractiveKeys: ["name", "action"],
maxQueueSize: 5,
timeToSend: 5000,
}).then(function (updatedTracker) {
tracker = updatedTracker;
console.log(tracker);
});

使用 $ 的 ES5 兼容版本。延期()

jQuery 延期承诺文档

这里的语法发生了一点变化，但没有什么剧烈的 - 而且想法是完全相同的。

var Tracking = {
__required_layout_keys: null,
__required_interactive_keys: null,
__maxQueueSize: null,
__timeToSend: null,
__initialized: false,
initialize: function(config){
Tracking.__initialized = true;
Tracking.__required_interactive_keys = config.requiredInteractiveKeys;
Tracking.__required_layout_keys = config.requiredLayoutKeys;
Tracking.__maxQueueSize = config.maxQueueSize;
Tracking.__timeToSend = config.timeToSend;
Tracking.__bid = '';
Tracking.__sid = '';
Tracking.__ua = '';
// get user data from FingerPrintJs2. 
// The callback needs to happen after these results are returned: 
var deferred = $.Deferred(); // create deferred object
new Fingerprint2().get(function(result, components){
var ua = components.find(function(item){
return item.key === "user_agent";
});
Tracking.__bid = result;
Tracking.__sid = result + "." + Date.now();
Tracking.__ua = ua.value;
deferred.resolve(Tracking); // resolve deferred object with updated Tracking obj
});
return deferred.promise(); // return deferred promise that we can chain off of
},
// there are other functions here that return ip, etc.
};
var tracker = null;
// jQuery deferreds work with $.when(promise).then() syntax
$.when(Tracking.initialize({
prod: 'OurProduct',
requiredLayoutKeys: ["scr"],
requiredInteractiveKeys: ["name", "action"],
maxQueueSize: 5,
timeToSend: 5000,
})).then(function (updatedTracker) {
tracker = updatedTracker;
console.log(tracker);
});