javascript - Google Analytics hitCallback 超时

Question

我正在查看 Google Analytics Guides并看到这段代码:

// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevents the browser from submiting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Sends the event to Google Analytics and
  // resubmits the form once the hit is done.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: function() {
      form.submit();
    }
  });
});

然后它说“如果(无论出于何种原因)analytics.js 库加载失败，hitCallback 函数将永远不会运行。”并提供如下解决方案:

// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevents the browser from submiting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Creates a timeout to call `submitForm` after one second.
  setTimeout(submitForm, 1000);

  // Keeps track of whether or not the form has been submitted.
  // This prevents the form from being submitted twice in cases
  // where `hitCallback` fires normally.
  var formSubmitted = false;

  function submitForm() {
    if (!formSubmitted) {
      formSubmitted = true;
      form.submit();
    }
  }

  // Sends the event to Google Analytics and
  // resubmits the form once the hit is done.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: submitForm
  });
});

我能看懂上面的代码。但是接下来的事情让我感到困惑:

function createFunctionWithTimeout(callback, opt_timeout) {
  var called = false;
  function fn() {
    if (!called) {
      called = true;
      callback();
    }
  }
  setTimeout(fn, opt_timeout || 1000);
  return fn;
}

// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevents the browser from submiting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Sends the event to Google Analytics and
  // resubmits the form once the hit is done.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: createFunctionWithTimeout(function() {
      form.submit();
    })
  });
});

我的理解是，在最后一段代码中，如果 analytics.js 库加载失败，hitCallback 函数将不会运行，这意味着 setTimeout() 将不会运行。所以最后一段代码似乎没有第二段代码的功能。

我错过了什么吗？或者这就是事实？

Answer 1

我认为这里首先需要弄清楚的是 Google 在说 hitCallback 失败时的意思。这个片段来自他们的 documentation on the property阐明了这一点:

You may want to avoid using hitcallBack to execute code that is critical to your application since it's possible it may not get called in rare cases (e.g. if the server doesn't respond or analytics.js fails to load). In this case you can set a timeout to ensure execution.

最初阅读问题后，我认为如果 ga 对象发送命中，那么肯定 hitCallback 必须工作，这种情况必须是全有或全无。从它的声音来看，谷歌只是警告系统中罕见的信号或在点击发送和回调功能之间发生的模糊加载失败。我从这个声明中了解到，ga 对象总是会使用 hitCallback，但是服务器永远不会返回响应的可能性很小。正是因为这些场景，建议不要有依赖于此属性的关键任务代码。

为了解释上面的代码， block 2 和 block 3 中的设置以不同的抽象级别实现相同的目标。在第二个 block 中，我们有一个函数:

function submitForm() {
    if (!formSubmitted) {
      formSubmitted = true;
      form.submit();
    }
  }

在触发表单的提交事件时，在 setTimeout 中调用一次，在 hitCallback 中调用一次。因此，如果后者从未得到响应，则前者的 1 秒延迟将在不依赖于响应的情况下提交表单。

第三个 block 将 setTimeout 功能包装在一个函数中，该函数在首次加载 javascript 时运行:

function createFunctionWithTimeout(callback, opt_timeout) {
  var called = false;
  function fn() {
    if (!called) {
      called = true;
      callback();
    }
  }
  setTimeout(fn, opt_timeout || 1000);
  return fn;
}

在这种情况下，createFunctionWithTimeout 是在读取 javascript 时计算的，传入的函数将在从分析返回时由 hitCallback 调用，或被之前的 setTimeout 调用。

由于 hitCallback 用作回调，我们可以通过使用事件监听器回调作为测试来验证这一点。以这段代码为例:

// Same function as above
function createFunctionWithTimeout(callback, opt_timeout) {
  var called = false;
  function fn() {
    if (!called) {
      called = true;
      callback();
    }
  }
  setTimeout(fn, opt_timeout || 1000);
  return fn;
}

// The createFunctionWithTimeout will be calculated initially when it loads
// If you don't press the button for 2 seconds, the alert will still pop up
// If you press the button before 2 seconds passes, you'll see the popup earlier
$('#btn').click(createFunctionWithTimeout(function() { 
	alert("Hello!"); 
  }, 2000)
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type='button' id='btn' value='test' />

因此，您使用第二个还是第三个 block 取决于您希望抽象出 setTimeout 功能的程度。如果您计划大量使用该函数，Google 的文档推荐第三种情况，因为这减少了重复代码，但最终，两者都实现了目标。