Функция debounce не работает на входных событиях - PullRequest
Новая
       38

Функция debounce не работает на входных событиях

0 голосов
/ 04 марта 2019

Я взял реализацию функции debounce из блога Дэвида Уолша.Вот тело этого: 

function debounce(func, wait, immediate) {
    var timeout;

    return function executedFunction() {
        var context = this;
        var 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);
    };
}

Теперь я использую эту функцию debounce в элементе ввода html следующим образом: 

 <input type="text" id="conversation_filter_recent_messages" oninput="debounce(Conversation.recentMessagesFilter,1000)" class="form-control" placeholder="Filter Conversations">

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

PS: Conversation.recentMessagesFilter - это моя функция, которая должна запускаться через 1 секунду и определена в другом файле.

Ответы [ 2 ]

0 голосов
/ 04 марта 2019

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

Однако, чтобы ваш код работал, вы можете сделать это debounce(Conversation.recentMessagesFilter.bind(this),1000)()

, поэтому 

 <input type="text" id="conversation_filter_recent_messages" oninput="debounce(Conversation.recentMessagesFilter.bind(this),1000)()" class="form-control" placeholder="Filter Conversations">

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

debounce(Conversation.recentMessagesFilter,1000)(this.value)
0 голосов
/ 04 марта 2019

Вы должны вызвать возвращенную функцию из функции debounce следующим образом: debounce(Conversation.recentMessagesFilter,1000)()

<input type="text" id="conversation_filter_recent_messages" 
 oninput="debounce(Conversation.recentMessagesFilter,1000)()" class="form-control"   
 placeholder="Filter Conversations">
...