Зависания при нажатии на экран

[Retro_1477]

Почему то при обработке функции которая отвечает за касания на экране происходят подвисания. У меня есть игра, которая каждый кадр вызывает функцию mobileController, она проверяет если нажатие на экране. Вот код:
/
var button1 = undefined,
button2 = undefined;

function mobileController() {
var el = document.getElementsByTagName('body')[0];


el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchend", handleEnd, false);
el.addEventListener("touchmove", handleMove, false);

function handleStart(evt) {
var touches = evt.changedTouches;
if (window.innerWidth / 2 < touches[0].pageX)
button1 = true;
button2 = false;
if (window.innerWidth / 2 > touches[0].pageX) {
button2 = true;
button1 = false
}
}

function handleEnd(evt) {
var touches = evt.changedTouches;
if (window.innerWidth / 2 < touches[0].pageX)
button1 = false;
button2 = false;
if (window.innerWidth / 2 > touches[0].pageX) {
button2 = false;
button1 = false
}
}

function handleMove(evt) {
var touches = evt.changedTouches;
if (window.innerWidth / 2 < touches[0].pageX)
button1 = true;
button2 = false;
if (window.innerWidth / 2 > touches[0].pageX) {
button2 = true;
button1 = false
}

}

};


button1 и button2 отвечают за передвижение персонажа вправо и влево.Причём в начале игры всё работает нормально, но постепенно начинает падать fps.

Подскажите как можно оптимизировать данный код?

[рони]

button1 и button2 отвечают за передвижение персонажа вправо и влево
возможно проблема в функции анимации движения, а не в том что вы показали.

[Nexus]

У меня есть игра, которая каждый кадр вызывает функцию mobileController
Или рони не увидел косяка, или я не прав, однако...
Ваша функция "mobileController" каждый раз, как вы её вызывает вешает на "body" по 3 обработчика.
Если эта функция вызывается 60 раз в секунду, то за эту секунду на body будет висеть уже 60*3=180 обработчиков событий.
Если после секунды ожиданий нажать куда-нибудь на страницу, то будут вызваны по очереди все 60 обработчиков для каждого из прослушиваемых событий.

Да и вместо трех обработчиков можно использовать 1, который также можно "упростить" в 2 раза.
function handler(e) {
button2 = !(button1 = (window.innerWidth / 2) < e.changedTouches[0].pageX);
}

[Retro_1477]

Nexus прав, слишком часто вызывается обработчик, сейчас попробую что-нибудь сделать

[Retro_1477]

нужно убрать обработчики из функции, но при этом они перестанут работать хммммм....

[Nexus]

нужно убрать обработчики из функции, но при этом они перестанут работать
Так вы 1 раз их повешайте.

[Retro_1477]

Спасибо вам за помощь!
Код теперь выглядит так
var button1, button2;

var el = document.getElementsByTagName('body')[0];

el.addEventListener("touchstart", handler, false);
el.addEventListener("touchend", handleEnd, false);
el.addEventListener("touchmove", handler, false);

function handler(e) {
button2 = !(button1 = (window.innerWidth / 2) < e.changedTouches[0].pageX);
};
function handleEnd(e) {
var touches = e.changedTouches;
if (window.innerWidth / 2 < touches[0].pageX)
button1 = false;
button2 = false;
if (window.innerWidth / 2 > touches[0].pageX) {
button2 = false;
button1 = false
}
};

[рони]

:-?
возможно проблема в функции анимации движения, а не в том что вы показали.
не нужно никаких body.addEventListener, достаточно
function handler(e) { button2 = !(button1 = (window.innerWidth / 2) < e.changedTouches[0].pageX);}
и даже два button лишнее

[рони]

Retro_1477,
handleEnd зачем условие , если всегда button1 = false; button2 = false;

[Retro_1477]

Рони, мне нужно отслеживать момент когда палец отходит от экрана.
Если я убираю handleEnd то персонаж будет бегать постоянно при касание на левую или правую часть экрана

[рони]

Retro_1477,
как-то так ...
var button, game;
var el = document.body;

el.addEventListener("touchstart", handleEnd, false);
el.addEventListener("touchend", handleEnd, false);
el.addEventListener("touchmove", handler, false);

function handler(e) {
button = (window.innerWidth / 2) < e.changedTouches[0].pageX;
};
function handleEnd(e) {
game != game;
if(game) {
// начать игру
}
else{
//закончить
}
};