Clear JavaScript call stack
Since it's not clear what's happening I made a video:
https://vimeo.com/171929645
As you can see the tool crashes at the end and before that it's just scrolling and showing the touchpoint (the animated circle) for every touchevent. I just want to clear the stack so this doesn't happen.
I'm building a JavaScript tool for a touchscreen computer which is very slow. So slow, that when you use your hand to trigger 100+ touchevents in a small amount of time (like 1 second) the computer starts to execute each touchevent after each other.
Since executing one touchevent already takes a few hundred milliseconds the tool isn't usable for about a minute.
I already wrote this script to block to much touchevents
'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;
This still doesn't block enough events because my tool still gets overloaded quite easy.
Is there a way to empty the entire callstack so my machine won't execute 100+ functions in a row?
Thanks.
EDIT
I updated my script a little and added two console logs. This is what I get from laying my hand on the touchscreen:
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
So putting one hand on the screen triggers more then 170 touchevents. Moving your hand will trigger over thousands of touchevents which will completely crash my computer. How can I prevent this from happening?
EDIT 2
One of the anwsers said 'You can just ignore most of the events.'. This isn't the case. When thousands of events are being called my computer crashed, so I can't 'just ignore' them.
The entire point of this question is to make my computer NOT crash. Every touchstart has multiple functions listening to it, so every touchstart event executes multiple functions.
Since these functions take a few hundred milliseconds to execute the tool keeps executing functions for minutes, making it unusable.
The problem is that this computer is so slow that he just 'remembers' all of the touchevents which have been inputted, even when you did this a minute ago and it's still busy with other stuff. So you just see the tool scrolling itself while no one is touching the screen.
If it still isn't clear what's happening I will record this and put it online.
You can just ignore most of the events. Aggregate all relevant touch events in an Array and then call the startHandler() . For example you may need only the first one and the last event so:
touchstartHandler: function (e) {
this.events.push(e)
this.startTimer();
},
Since you're using Backbone you can try _.debounce or _.throttle to limit calling startHandler()` too many times.
startTimer: _.debounce(function () {
//do sth with this.events
console.log(this.events[0])
}, 50);
_.debounce() docs
Try using debounce, which only calls a function once every X ms. immediate makes the first call of function execute before X ms, non-immediate calls it after X ms have passed.
here is the implementation of it:
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);上一篇: 调用堆栈是否证明代码执行没有中断？
下一篇: 清除JavaScript调用堆栈