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

在Javascript中类样式对象的实例之后运行回调,javascript,fingerprintjs2,Javascript,Fingerprintjs2,我正在接受其他人的代码,不确定我是否正在以正确的方式进行操作 有一个跟踪器“类”(基本上只是一个函数对象,包括一个“初始值设定项”) 该类将调用第三方库 返回结果后应进行回调 以下是我想做的: var tracker = Tracking.initialize({ prod: 'OurProduct', requiredLayoutKeys: ["scr"], requiredInteractiveKeys: ["name", "action"],

我正在接受其他人的代码,不确定我是否正在以正确的方式进行操作

有一个跟踪器“类”(基本上只是一个函数对象,包括一个“初始值设定项”)

该类将调用第三方库

返回结果后应进行回调

以下是我想做的:

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;
tracker的值为“未定义”,并且Tracking的值尚未设置其“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;
    });


 }

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

您需要做的是将
new Fingerprint2().get()
调用包装为一个承诺,然后在传递到
get
函数的“
done
”函数(在setTimeout内调用的函数)中解析该承诺

然后,您可以从
跟踪
对象中的
初始化
函数返回承诺,以便在成功初始化/更新数据后将其链接并执行操作

使用Promise对象的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);
});
使用$.Deferred()的ES5兼容版本

这里的语法有一点变化,但并没有什么剧烈的变化——而且想法是完全一样的

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);
});

您好@mhodges,在设置您的更改后,我收到一个错误
无法读取
}上未定义的
的属性'then'。然后(函数(updateTracker)
line.@donaldduck好的,给我几分钟试着调试一下,我会告诉你我做了什么find@donaldduckOhhh好的,我只是看了指纹的代码。我知道他们在做什么。这实际上不是异步的-乍一看就是这样。他们的get函数是这样的:
get:function(done){…return done(arg1,arg2)}
。这意味着您只需从get函数回调返回
跟踪
,您应该是golden。我将更新我的帖子accordingly@donaldduck更新。看一看。非常感谢您的全面指导。ES6版本非常适合我,工作非常完美。