Как эффективный способ попасть в API автозаполнения текста по событию keyup / keypress в React / JavaScript? - PullRequest
Новая
       70

Как эффективный способ попасть в API автозаполнения текста по событию keyup / keypress в React / JavaScript?

0 голосов
/ 06 февраля 2020

Мы хотим реализовать функцию автозаполнения ввода с событием on keypress / keyup, чтобы пользователь мог получать автоматические предложения от API. Каким будет эффективный способ поразить API? Мы не хотим нажимать api при каждом нажатии клавиши.

1 Ответ

0 голосов
/ 06 февраля 2020

Любой может использовать эту функцию debounce and throttle в WebApps и React native-приложениях. Это очень полезно, в то время как мы хотим автозаполнение ввода текста с помощью вызова API.

Регулирование

Регулирование - это метод, в котором, независимо от того, сколько раз пользователь запускает событие, прикрепленная функция будет выполняться только один раз за заданный интервал времени.

Debouncing

В технике debouncing, независимо от того, как Много раз пользователь запускает событие, присоединенная функция будет выполняться только по истечении указанного времени, как только пользователь прекратит запускать событие. 

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script type="text/javascript">
            function debounce(fn,d){
                let timer;
                return function(){
                    let context=this,
                    args=arguments
                    clearTimeout(timer);
                    timer=setTimeout(()=>{
                        fn.apply(context,args);
                    },d);
                }
            }


            function throttle(fn,d){
                let flag=true;
                return function(){
                    let context=this,
                    args=arguments
                    if(flag){
                        fn.apply(context,args);
                        flag=false;
                        setTimeout(()=>{
                            flag=true;
                        },d);
                    }
                }
            }

            let counter=0;

            let getData =()=>{
                console.log("Click :",counter++);
            }
            let autoCompleteText=(text)=>{
                console.log("AutoComplete :",text);
            }
            let deAutoCompleteText=debounce(autoCompleteText,300);
            let thGetData=throttle(getData,1000);

        </script>

    </head>
    <body>
    <input type="text" name="autotext" id="autotext" onkeyup="deAutoCompleteText(this.value)">
    <input type="button" value="Click Me" onclick="thGetData()">
    </body>
    </html>
...