Question

当用户点击链接或提交表单时，我希望在短暂的宽限时间内触发并忘记请求。这是我正在使用的简化代码：

var scheduler = new TestScheduler();

//Convert to array of OnNext notifications and create an Observable
var history = stocks.Select(i => OnNext(i.Time.Ticks, i)).ToArray();
var stockHistoryObservable = scheduler.CreateHotObservable(history);

//Create an observer and subscribe
var observer = scheduler.CreateObserver<StockTickerChangeHistory>();
stockHistoryObservable.Subscribe(observer);

scheduler.AdvanceTo(dateWhenNoHistoryYet); //no history
observer.Messages.AssertEqual(); 
scheduler.AdvanceTo(dateWhenHistoryIsCompleted); //all history arrived
observer.Messages.AssertEqual(history);

这适用于element.addEventListener(eventType, function(event) { if (event.retriggered) { return true; } let target = event.target; let newEvent = new event.constructor(event.type, event); newEvent.retriggered = true; setTimeout(() => { target.dispatchEvent(newEvent); }, 250); // fire and forget the request makeRequest(); event.preventDefault(); return false; });个事件，它适用于Firefox中的click事件，但不适用于Chrome。我创建了一个fiddle here。在Firefox中，如果单击该按钮，则可以看到浏览器发出GET请求，但Chrome中不会发生这种情况。根据我的测试，原始和新事件在两个浏览器中看起来都相同，submit返回dispatchEvent。尽管如此，实际的提交并不是在Chrome中触发的，所以我想知道Chrome是否会将提交作为安全措施停止或者我是否遗漏了某些内容？

Answer 1

您要发送的事件与您尝试复制的事件至少有一点不同。您的活动将事件的isTrusted属性设置为false。也许这就是Chrome不提交表单的原因。

我所知道的是，对于表单，您可以获得所需的结果，代码略有不同。我的基础是你的小提琴中的代码，所以它现在只处理表单提交。

let 
  form = document.getElementById('form');

form.addEventListener('submit', function(event) {
  setTimeout(() => {
    form.submit();
  }, 250);

  event.preventDefault();
});

<form id="form" method="get" action="/echo/html/">
  <button type="submit">Go</button>
</form>

您可以只调用表单的submit()方法，而不是自己调度提交事件。这将提交表单，但不会导致任何提交处理程序被触发（根据this MDN文章）。它将为您节省检查处理程序，以查看提交是否应该延迟。

你可以调整它以使用锚点。

let 
  form = document.getElementById('form'),
  anchor = document.getElementById('anchor');

function onDelayNavigationEvent(event) {
  const 
    target = event.target;
    
  if (target.hasAttribute('is-delayed')) {
    return true;
  }
  
  setTimeout(() => {
    if (target.tagName.toLowerCase() === 'form') {
      target.submit();
    } else {
      target.click();
    }
  }, 2000);
  
  target.setAttribute('is-delayed', true);
  event.preventDefault();
}

function delayNavigation(element, eventName) {
  element.addEventListener(eventName, onDelayNavigationEvent);
}

delayNavigation(form, 'submit');
delayNavigation(anchor, 'click');

<form id="form" method="get" action="/echo/html/">
  <button type="submit">Go</button>
</form>

<a id="anchor" href="//stackoverflow.com">Stack Overflow</a>

延迟在Chrome中提交表单

1 个答案: