清除JavaScript呼叫堆栈

Question

由于不清楚发生了什么，所以我制作了一个视频：

https://vimeo.com/171929645

您可以看到该工具在末尾崩溃了，在此之前，它只是在滚动并显示每个触摸Entevent的接触点（动画圆圈）。我只想清除堆栈，这样就不会发生。

---

我正在为触摸屏计算机构建JavaScript工具，该工具非常慢。如此慢，以至于当您用手在少量时间内触发100 触摸时（如1秒），计算机开始彼此执行每个触摸。

由于执行一个TouchEvent已经花费了几百毫秒，因此该工具在大约一分钟内无法使用。

我已经写了这个脚本以阻止大量触摸events

'use strict';
var MultiTouch = Backbone.NativeView.extend({
  el: document,
  initialize: function () {
    console.log('Init MultiTouch');
    this.el.addEventListener('touchstart', function(e) {
      this.touchstartHandler(e);
    }.bind(this));
  },
  touchstartHandler: function (e) {
    if (this.block) {
      console.log("block");
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
      return;
    }
    console.log("no block");
    this.startTimer();
  },
  startTimer: function () {
    this.block = true;
    setTimeout(function () {
      this.block = false;
    }.bind(this), 300);
  }
});
module.exports = MultiTouch;

这仍然没有阻止足够的事件，因为我的工具仍然非常容易。

有没有办法清空整个呼叫堆栈，因此我的计算机不会连续执行100多个功能？

谢谢。

编辑

我稍微更新了脚本，并添加了两个控制台日志。这就是我将手放在触摸屏上得到的：

no block MultiTouch.js:31
17 block MultiTouch.js:23
no block MultiTouch.js:31
19 block MultiTouch.js:23
no block MultiTouch.js:31
12 block MultiTouch.js:23
no block MultiTouch.js:31
20 block MultiTouch.js:23
no block MultiTouch.js:31
7 block MultiTouch.js:23
no block MultiTouch.js:31
8 block MultiTouch.js:23
no block MultiTouch.js:31
6 block MultiTouch.js:23
no block MultiTouch.js:31
9 block MultiTouch.js:23
2 no block MultiTouch.js:31
9 block MultiTouch.js:23
no block MultiTouch.js:31
7 block MultiTouch.js:23
no block MultiTouch.js:31
5 block MultiTouch.js:23
no block MultiTouch.js:31
7 block MultiTouch.js:23
no block MultiTouch.js:31
6 block MultiTouch.js:23
no block MultiTouch.js:31
11 block MultiTouch.js:23
no block MultiTouch.js:31
3 block MultiTouch.js:23

因此，将一只手放在屏幕上会触发超过170个触摸。移动您的手将触发数千个触摸事件，这将使我的计算机完全崩溃。我如何防止这种情况发生？

编辑2

ANWSERS之一说："您可以忽略大多数事件。"。事实并非如此。当数千个事件被称为我的计算机崩溃时，我不能"忽略"它们。

这个问题的全部要点是使我的计算机不崩溃。每个触摸start都有多个功能，因此每个触摸start事件都执行多个功能。

由于这些功能需要数百毫秒来执行该工具，因此可以保持执行功能几分钟，从而使其无法使用。

问题在于，这台计算机太慢了，以至于他只是"记住"了已输入的所有触摸，即使您在一分钟前进行了此操作，并且仍然忙于其他东西。因此，您只会在没有人触摸屏幕的同时看到工具滚动。

如果仍然不清楚发生了什么，我将记录下来并将其放在网上。

Answer 1

您可以忽略大多数事件。在数组中汇总所有相关触摸事件，然后调用startHandler()。例如，您可能只需要第一个和最后一个事件，所以：

touchstartHandler: function (e) {
  this.events.push(e)
  this.startTimer();
},

由于您使用的是骨干，因此可以尝试_.debounce或_.Throttle to limit calling Starthandler（）

startTimer: _.debounce(function () {
 //do sth with this.events
 console.log(this.events[0])
}, 50);

_。debounce（）docs

Answer 2

尝试使用debounce，它只调用一个函数一次。立即使X MS之前的第一个函数呼叫执行，非IMMediate在X MS通过后调用。

这是它的实现：

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};
var touchEvent = function() {
  console.log('touched');
};
var debouncedTouchEvent = debounce(touchEvent, 500, true);
for (var i = 0; i < 100000; i++) {
  debouncedTouchEvent();
  //will only be called once every 500ms.
}
// element.addEventListener('touch', debouncedTouchEvent);