2016-06-23 6 views
1

Поскольку не ясно, что происходит, я сделал видео:Очистить JavaScript стек вызовов

https://vimeo.com/171929645

Как вы можете увидеть сбои инструмента в конце, а до этого она просто прокрутки и показывать TouchPoint (анимированный круг) для каждого касания. Я просто хочу очистить стек, чтобы этого не произошло.


Я создаю инструмент JavaScript для компьютера с сенсорным экраном, который очень медленный. Настолько медленно, что, когда вы используете свою руку, чтобы вызывать 100+ touchevents за небольшой промежуток времени (например, 1 секунду), компьютер начинает выполнять каждый touchhevent друг за другом.

Поскольку выполнение одного touchhevent уже занимает несколько сотен миллисекунд, инструмент не используется в течение минуты.

Я уже написал этот сценарий, чтобы блокировать к гораздо 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; 

Это еще не блокирует достаточно событий, потому что мой инструмент все еще перегружен довольно легко.

Есть ли способ удалить весь столбец, чтобы моя машина не выполняла более 100 функций подряд?

Спасибо.

EDIT

Я обновил свой сценарий немного и добавил два лога консоли. Это то, что я получаю от укладки руку на сенсорном экране:

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 touchevents. Движение вашей руки вызовет тысячи прикосновений, которые полностью разрушат мой компьютер. Как я могу предотвратить это?

EDIT 2

Один из anwsers сказал: 'Вы можете просто игнорировать большинство событий.'. Это не так. Когда тысячи событий называются, мой компьютер разбился, поэтому я не могу «просто игнорировать» их.

Вся эта проблема заключается в том, чтобы заставить компьютер НЕ сбой. Каждый сенсорный старт имеет несколько функций, слушающих его, поэтому каждое событие touchstart выполняет несколько функций.

Поскольку эти функции занимают несколько сотен миллисекунд, чтобы выполнить инструмент, он продолжает выполнять функции в течение нескольких минут, что делает его непригодным.

Проблема в том, что этот компьютер настолько медленный, что он просто «запоминает» все введенные вами прикосновения, даже когда вы сделали это минуту назад, и он по-прежнему занят другими вещами. Таким образом, вы просто видите, что инструмент прокручивается сам, пока никто не касается экрана.

Если все еще не ясно, что происходит, я запишу это и поставлю его онлайн.

ответ

1

Вы можете просто игнорировать большинство событий. Совокупность всех соответствующих событий касания в массиве, а затем вызов startHandler(). Например, вы, возможно, потребуется только первое и последнее событие так:

touchstartHandler: function (e) { 

    this.events.push(e) 
    this.startTimer(); 

}, 

Поскольку вы используете Backbone вы можете попробовать _.debounce или _.throttle to limit calling startHandler() `слишком много раз.

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

_.debounce() docs

0

Попробуйте использовать дребезг, который только вызывает функцию один раз каждый Х мс. немедленный делает первый вызов функции выполненным до X ms, немедленные вызовы после 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);