3

Заметил в логах и перепроверил на своей клавиатуре, что при вводе в текстовое поле искомого значения и нажатия клавиши Enter происходит как-бы залипание клавиши клавиатуры и PHP-скрипт отрабатывает 5-20 раз. При нажатии кнопки Поиск мышкой такого нет.

Как такого избежать? Можно ли средствами JS это реализовать?

На текстовое поле наложен jQuery обработчик:

var myobj = {

    txtSearch: $('#txtSearch'),
    btnSubmit: $('#btnSubmit'),

    init: function () {
        this.btnSubmit.on('click', this.action.bind(this));
        this.txtSearch.on('keyup', this.action.bind(this));
    },

    action: function (e) {
        //проверяем клик по кнопке или энтер
        if (e.keyCode !== 13 && e.type !== 'click') {
            return;
        }

        this.disableForm();
        //getAjax()
    },


    getAjax: function (code) {
        $.ajax({...})
            .done(function (r) {
                this.enableForm();
            }.bind(this));
    },

    disableForm: function () {
        this.btnSubmit.attr('disabled', 'disabled');
        this.txtSearch.off('keyup', this.action.bind(this));
    },

    enableForm: function () {
        this.btnSubmit.removeAttr('disabled');
        this.txtSearch.on('keyup', this.action.bind(this));
    },
};

Скриншот одного нажатия клавиши Enter, то есть, проблему видно налицо:

введите сюда описание изображения

Update: нашел проблемку, при нажатии enter отключал форму this.txtSearch.off('keyup', this.action.bind(this));, а затем при загрузке результата включал её обратно this.txtSearch.on('keyup', this.action.bind(this));

Я думал, что обработчик удаляется, а затем заново навешивается. На самом деле, обработчик не удаляется, а наоборот плодится в геометрической прогрессии.

7
  • 1
    причина ситуации: ваше отключение слушателя keyup через bind-ованный объект ничего не отключает, а следующее «включение» добавляет ещё один обработчик и за счет этого количество запросов к серверу при следующем клике увеличивается на 1 13 янв 2021 в 18:04
  • 1
    а, я ехал в метро и недочитал, что вы это сами поняли. проблема в том, что каждый новый .bind дает не один и тот же, а разные объекты, т.е. отписка не выполняется. исправили? 13 янв 2021 в 18:40
  • @nörbörnën ну пока сделал отключение/включение текстового поля через this.txtSearch.prop("disabled", false); 13 янв 2021 в 18:47
  • кстати, код, который ты показал сегодня, совсем не соответствует теме проблеме, описанной в вопросе и даже вводит в заблуждение :) глядя на код хочется посоветовать не отключать обработчики, не дизаблить форму, а просто вызывать ajax запрос через underscorejs.org/#throttle или underscorejs.org/#debounce. т.е. при получении события пользовательского ввода откладывать ajax-запрос на некий таймаут и если было получено ещё одно событие то убивать существующий таймер и создавать новый (по той же схеме работающий) 14 янв 2021 в 14:17
  • Я подобное исправлял через таймаут для поиска на фронте, чтобы при вводе каждого символа не начинать заново поиск. Т.е. заводим таймаут, на таймаут выполняется действие, таймаут активируется при вводе символов и сбрасывается при повторном: github.com/gil9red/js__played_games_parser/blob/…
    – gil9red
    14 янв 2021 в 19:03

1 ответ 1

8
+400

Начну объяснение с небольшого эксперимента, проверим, являются ли два значения - одинаковыми значениями (т.е. ссылаются ли они на одно и то же). Для сравнения воспользуемся методом Object.is():

const q = {a: true};
const z = q;
z.b = false;

console.log( Object.is(q, q) );
console.log( Object.is(q, z) );

Видим, что Object.is возвращает true, т.е. по ссылке один и тот же объект.

Теперь поставим эксперимент с сущностями, которые ближе к вопросу:

const fn = () => {};
const bindedFn1 = fn.bind(window);
const bindedFn2 = fn.bind(window);

console.log( Object.is(bindedFn1, bindedFn2) );

Видим, что Object.is возвращает false, т.е. при каждом вызове bind создаётся новый объект.

Что происходит в твоём коде

$().ready(() => {

    class Search {
        constructor() {
            this.count = 0;
            this.txtSearch = $('#search');
            this.txtSearch.on('keyup', this.action.bind(this));
        }
        
        action(ev) {
            console.log(`call action ${++this.count}`);
            this.txtSearch.off('keyup', this.action.bind(this));
            this.txtSearch.on('keyup', this.action.bind(this));
        }
    }
    
    const example = new Search();

    $(document).on('keyup', () => console.log('------------------'));

});
<html>
  <body >
    <input id="search" type="text"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </body>
</html>

В логе видно, что при текстовом вводе в input, с каждым новым событием количество вызовов функции action увеличивается, видна "серия" вызовов.

Так происходит из-за того, что при отписке от события, this.txtSearch.off('keyup', this.action.bind(this)), ты передал не тот же обработчик, который был передан при подписке. Такой же, но не тот же. Ты передал другую функцию. При отписке нужно было передавать именно ту функцию, которую ты передавал при подписке, именно её следует удалить.

А "серия" вызовов образуется потому, что при первом вызове action добавляется +1 обработчик. При втором вызове 2 обработчика и добавляется ещё +2. На третьем 4 обработчика и добавляется ещё +4. Лавина.

Как нужно исправить твой код

Не зная что за сущность твой this, я покажу как решить проблему в лоб - просто сохраню в this экземпляр функции, которая станет обработчиком события keyup, вот так: this.handlerKeyUp = this.action.bind(this)

хотя ещё можно отписаться вообще от всего this.txtSearch.off('keyup'), но обычно так делать не рекомендуют

$().ready(() => {

    class Search {
        constructor() {
            this.count = 0;
            this.txtSearch = $('#search');
            
            this.handlerKeyUp = this.action.bind(this);
            this.txtSearch.on('keyup', this.handlerKeyUp);
        }
        
        action(ev) {
            console.log(`call action ${++this.count}`);
            this.txtSearch.off('keyup', this.handlerKeyUp);
            this.txtSearch.on('keyup', this.handlerKeyUp);
        }
    }
    
    const example = new Search();

    $(document).on('keyup', () => console.log('------------------'));

});
<html>
  <body >
    <input id="search" type="text"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </body>
</html>

в можно задекорировать метод так, чтоб он был autobind, но я не помню как это сделать в js. можешь поискать, для расширения кругозора :)


UDP by Qwertiy

В функцию .on передаётся строка со списком отслеживаемых событий в которых, опционально, можно указать namespace. Таким образом можно кастомизировать отписку от обработчика:

$().ready(() => {

    class Search {
        constructor() {
            this.count = 0;
            this.txtSearch = $('#search');

            this.txtSearch.on('keyup.ns', this.action.bind(this));
        }
        
        action(ev) {
            console.log(`call action ${++this.count}`);
            this.txtSearch.off('keyup.ns');
            this.txtSearch.on('keyup.ns', this.action.bind(this));
        }
    }
    
    const example = new Search();

    $(document).on('keyup', () => console.log('------------------'));

});
<html>
  <body >
    <input id="search" type="text"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </body>
</html>

9
  • если надо, добавил код для понимания this 14 янв 2021 в 8:10
  • ну а что это меняет? объяснение я написал, вариант решения я написал. поставь в init this.handlerKeyUp = this.action.bind(this) и дальше по тексту 14 янв 2021 в 8:13
  • я понял, дописал для полноты картины. 14 янв 2021 в 8:14
  • 1
    Раз уж тут jQuery, то обработчик можно добавить с неймспейсом и отписаться от всего неймспейса. this.txtSearch.on('keyup.smth', this.action.bind(this)) и потом this.off('keyup.smth') // cc @Jean-Claude
    – Qwertiy
    14 янв 2021 в 13:37
  • @Qwertiy дополнить ответ? 14 янв 2021 в 13:47

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.