Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Применение библиотек > JQuery. Задержка выполнения скрипта


Автор: Gold Dragon 16.5.2011, 14:51
У меня есть скрипт который реагирует на нажатие клавиш и возвращает определённые данные. Но он выполняется каждый раз по нажатию клавиши. В принципе ничего страшного, но если быстро вводить данные и выводить данные плавно, то получается моргание.. 

Мне нужно как-то сделать задержку выполнения скрипта.. Допустим я быстро ввожу данные, а скрипт посылает только через определённое время. А значит значение в поле ввода содержит уже больше буковков и моргания не будет.. Вот что я тут навертел, но результата всё равно нет

Вот что есть:
скрипт
Код

$("#kabsearchword").keyup(function(){
    setTimeout(function(){
        $.get('ajax.index.php?option=com_gdkabak&task=mosearch&str='+$("#kabsearchword").val(), function(data){
            $('#kabsearchform').fadeOut(300);
            $('#kabsearchform').html(data).fadeIn(300);
            return false;
        });
    }, 2600);
});

сама форма
Код

function gdModKabSearch() {
    $result = '<div id="kab-mod-search">';
    $result .= '<input name="kabsearchword" id="kabsearchword" maxlength="50" type="text" size="30" value=""  />';
    $result .= '<div id="kabsearchform"></div>';
    $result .= '</div>';
    $result .= '<script type="text/javascript" src="/components/com_gdkabak/js/mod_kabsearch.js"></script>';
    echo $result;
}

ну и стиль
Код

#kab-mod-search{
    width: 280px;
}
#kabsearchword{
    background: #f4f4f4;
    border: solid 1px #a3a3a3;
    padding: 5px 10px;
    font-family: Arial;
    font-weight:bold;
    -webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
    box-shadow: inset 0 2px 3px rgba(0,0,0,.1);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-appearance: none; /* reset webkit search style */
    background-image: url("/components/com_gdkabak/images/search.png");
    background-position:center;
    background-repeat:no-repeat;
}
#kabsearchword:focus{
    background: #ffffcc
}
#kabsearchform{
    display:none;
    border:#cccccc;
}
.mosearchresult{
    width:100%;
    background-color:#ffffcc;
    padding:3px;
}


что и как исправить?

Автор: нуп 16.5.2011, 14:58
.stop() попробуйте
Код

('#kabsearchform').stop().fadeOut(300);
            $('#kabsearchform').html(data).stop().fadeIn(300);

Автор: Gold Dragon 16.5.2011, 15:03
не пойдёт... Данные то уже получены.. А нужно чтобы нажатия были, а запрос отсылался только после определённого времени.. Сейчас он отсылается после каждого нажатия, но с первоначальной задержкой...

заменил setTimeout, уж пусть всё будет jquery
Код

$("#kabsearchword").keyup(function(){
    $.get('ajax.index.php?option=com_gdkabak&task=mosearch&str='+$("#kabsearchword").val(), function(data){
        $('#kabsearchform').fadeOut(300);
        $('#kabsearchform').html(data).fadeIn(300);
        return false;
    });
}).delay(2600);

Автор: нуп 16.5.2011, 15:07
Пффф! Тогда такое, не вешайте на кейап, а сделайте таймер раз в 2 сек например и проверяйте содержимое поле, если изменилось - делаем запрос, если нет - курим

Автор: Gold Dragon 16.5.2011, 15:12
это форма поиска на сайте... и постоянно таймер иметь не лучший способ.....


хотя если включать таймер при фокусе и выключать при потери фокуса... можно попробовать.. Но опять же не выход.. если пользователь поставил в поле курсор и пошёл курить, то базу завалит запросами smile

Что-то не могу сформировать логику, что-то крутится в голове, а не могу собрать в кучу

Автор: нуп 16.5.2011, 15:14
Какими запросами? если значение в поле не изменяется, запроса не будет

Автор: Gold Dragon 16.5.2011, 15:16
да в любом случае, если страница висит, то ничего не должно работать... Нафига такие заморочки. А если таких скриптов куча? сайт просто будет висеть

Добавлено через 1 минуту и 57 секунд
в общем логика наверное такая:
- я нажимаю клавишу
- включается таймер
- при достижении Х посылается запрос
- если таймер достиг Y то останавливается
- если нажата клавиша, то таймер обнуляется
- если фокус потерян то таймер останавливается....

так?

Автор: нуп 16.5.2011, 15:22
Нет. Строите форму и просто вешаете таймер. 

Автор: Gold Dragon 16.5.2011, 15:28
нуп, ты мне предлагаешь постоянно работающий таймер?

Добавлено через 18 секунд
или как? поясни.. а лучше кодом

Автор: нуп 16.5.2011, 15:42
Код

var send = true;
var old_value = '';
function timerFunc()
{
   if(!send || $("#kabsearchword").val() == old_value) 
      return;
  send = false;
 old_value = $("#kabsearchword").val();
   $.get('ajax.index.php?option=com_gdkabak&task=mosearch&str='+$("#kabsearchword").val(), function(data){
        $('#kabsearchform').fadeOut(300);
        $('#kabsearchform').html(data).fadeIn(300);
        send = true;
        return false;
    });
}
setInterval(timerFunc, 2000);


блин ещё условие забыл

Автор: Gold Dragon 17.5.2011, 07:32
нуп, а твой код сколько раз выполняется? smile

Автор: ksnk 17.5.2011, 08:19
Код

function getIt(){
    $.get('ajax.index.php?option=com_gdkabak&task=mosearch&str='+$("#kabsearchword").val(), function(data){
        $('#kabsearchform').fadeOut(300);
        $('#kabsearchform').html(data).fadeIn(300);
        return false;
    });
}

$("#kabsearchword").keyup(function(){
    if (getIt.timeout) clearTimeout(getIt.timeout);
    getIt.timeout=setTimeout(getIt,2600);
})

Автор: нуп 17.5.2011, 08:19
Я не навязываю его, для этой задачи я бы сделал так. 

Автор: Gold Dragon 17.5.2011, 10:15
ksnk, именно то что нужно! Именно то что я пытался сформировать но не получилось домыслить smile

Цитата(нуп @  17.5.2011,  09:19 Найти цитируемый пост)
Я не навязываю его, для этой задачи я бы сделал так.  
И очень плохо. Если скрипт выполнил свою функцию, он должен отключится. А у тебя постоянно работает и тратит ресурсы

Добавлено через 1 минуту и 41 секунду
вот окончательный код... может кому пригодится
Код

function kab_getKabak() {
    $('#kabsearchform').fadeOut(300, function(){
        $.get('ajax.index.php?option=com_gdkabak&task=mosearch&str=' + $("#kabsearchword").val(), function(data) {
            $('#kabsearchform').html(data).fadeIn(600);
            return false;
        });
    });
}
$("#kabsearchword").keyup(function(){
    if(kab_getKabak.timeout){
        clearTimeout(kab_getKabak.timeout);
    }
    kab_getKabak.timeout = setTimeout(kab_getKabak,500);
});
$("#kabsearchword").blur(function() {
    $("#kabsearchform").css("display", "none");
    $("#kabsearchword").val('');
});

Автор: wsok 21.6.2011, 07:34
спасибо за ваш вариант кода, кое что использовал, но опять же остались вопросы, почему обработчику пхп достаются слова, предшествующие окончательному слову? Например слово test ввожу, но поиск уже пытается искать по:

t
te
tes

Хотя  как видно из моего кода, таймер сбрасывается при факте нового ввода и по идее отсчёт идёт опять с исходного значения.


Код

function seu(value) {
        var cu = 2;
        var users = $("#users");
    var itog = $("#itog");
        var timer = setInterval(function(){
cu--;
$("#secunda").html('<br><b>ввод данных доступен</b> '+cu);
$("#seu").keyup(function(){
clearInterval(timer);
});
    
 itog.html('<br><img src=images/ajax-loader.gif>');
if(cu <= 0 ) {
users.fadeTo(500, 0.4);
$("#secunda").html('');
    $.post(
        '../plugins/users/admin/ajax.inc.admin/usersload.php',
                {
                act: "users",
                id:  value
                },
        function (data) {
            users.html(data);
            users.fadeTo(500, 1);
        }
    );
       $.post(
        '../plugins/users/admin/ajax.inc.admin/usersload.php',
                {
                act2: "itog",
                id:  value
                },
        function (data) {
            itog.html(data);
        }
    );

clearInterval(timer);    
}    
    },1000);    
}


и форма поиска

Код

<input style=\"width: 70%; font-size:20px;\"  type=text id=seu value='' onKeyUp = 'seu(this.value);' >


скрипт пхп обработчика не стану приводить, там и так ясно, получает значение и он выводит данные из БД, вот только казус, откуда пхп "знает" историю ввода, до окончательного варианта слова test?

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

Помогите пожалуйста.

Автор: wsok 21.6.2011, 11:54
Всё вопрос снят, я тупо сувал скрипту переменную валуе, которая постоянно менялась при вводе, вот и получался некий массив данных с которыми я так безуспешно боролся и совершенно забыл про упоминание в вашем примере этой фишки .val(), так что теперь всё ок, работает как и надо, но вместо таймайт я использую интервал.

Автор: Gold Dragon 21.6.2011, 12:45
Цитата(wsok @  21.6.2011,  12:54 Найти цитируемый пост)
но вместо таймайт я использую интервал
Зачем?

Автор: wsok 22.6.2011, 00:34
Цитата(Gold Dragon @ 21.6.2011,  12:45)
Цитата(wsok @  21.6.2011,  12:54 Найти цитируемый пост)
но вместо таймайт я использую интервал
Зачем?

Разве плохо? Вроде работает у меня и вполне неплохо, вот код


Код

function seu(value) {
var cu = 2;
var users = $("#users");
var itog = $("#itog"); 
var timer = setInterval(function(){
cu--;
$("#seu").keyup(function(){
clearInterval(timer);
});

$("#secunda").html('<br><b>ожидание окончания ввода данных</b>');
if(cu == 0 ) {
itog.html('<br><img src=images/ajax-loader.gif>');
users.fadeTo(500, 0.4);
$("#secunda").html('');

$.post(
'../plugins/users/admin/ajax.inc.admin/usersload.php',
{
act: "users",
id: $("#seu").val()
},
function (data) {
users.html(data);
users.fadeTo(500, 1);
}
);
$.post(
'../plugins/users/admin/ajax.inc.admin/usersload.php',
{
act2: "itog",
id: $("#seu").val()
},
function (data) {
itog.html(data);
}
);

clearInterval(timer);    
}    
},1000);    
}


чем так плох интервал?

Автор: Gold Dragon 22.6.2011, 07:16
Цитата(wsok @  22.6.2011,  01:34 Найти цитируемый пост)
чем так плох интервал? 
да тем что выполняет код много раз, через равные промежутки времени.. вопрос: а зачем это? smile Ну т.е. задача у функции другая изначально ;)

Автор: wsok 22.6.2011, 08:42
Цитата(Gold Dragon @ 22.6.2011,  07:16)
Цитата(wsok @  22.6.2011,  01:34 Найти цитируемый пост)
чем так плох интервал? 
да тем что выполняет код много раз, через равные промежутки времени.. вопрос: а зачем это? smile Ну т.е. задача у функции другая изначально ;)

ну видишь в моём коде переменную cu--; ?

Вдруг я решу вывести визуально обратный отсчёт до совершения действия? Например, Ожидание ввода данных 5 секунд

4
3
2
1
0

а теперь ищем =))

Автор: Gold Dragon 22.6.2011, 09:28
ааа, ну тогда да.. Согласен что так интереснее ;)
вот только зачем он тут нужен  smile 

Автор: wsok 22.6.2011, 09:58
Цитата(Gold Dragon @ 22.6.2011,  09:28)
ааа, ну тогда да.. Согласен что так интереснее ;)
вот только зачем он тут нужен  smile

согласен, может в данном случае это не столь нужно, но ведь этот пример одним поиском не ограничивается, может кому то как раз и нужен пример кода с интервалом, чтоб выводить пользователю таймер?

А так согласен, можно интервал заменить на таймаут, но то что в данной теме есть уже два варианта кода с таймаут и интервалом, это уже нормально, может нуждающиеся выберут нужное решение для своих дел, глянув эту ветку.

В обоих случаях думаю получилось неплохо и главное всё работает как надо =)

Автор: wsok 22.6.2011, 10:13
В моём случае, я поиск встроил в раздел управления пользователями в админке CMS, которую пишу сам. Так как CMS ещё в в процессе, я н выложил демо в сеть, записал видео работы этого кода в моём примере.

http://www.youtube.com/watch?v=JWLPNJ1YMY0

В общем я обязан этой теме, что удалось довести код до готовности, что и видно на видео =)

По моему раздел управления пользователями вполне неплохо получился =)

Автор: Gold Dragon 22.6.2011, 11:25
вот мой пример
http://tigris-tambov.ru/files/Project002.avi
smile

Автор: wsok 22.6.2011, 11:33
Цитата(Gold Dragon @ 22.6.2011,  11:25)
вот мой пример
http://tigris-tambov.ru/files/Project002.avi
smile

Тоже интересный вариант =)

Ну нечто такое я реализую на самом уже сайте, для админки достаточно того, что уже получилось.

В принципе функционально можно догнать и гугл поиск, там где выводится ещё и автозавершение вариантов поиска в выпадающем меню под формой ввода, но тоже надо покумекать, как это работает =)

Автор: Gold Dragon 22.6.2011, 11:35
там всё просто.. только для такого не хватит мощности наших хостингов smile 1000 челов зайдут и сервер базы ляжет 

Автор: wsok 22.6.2011, 11:42
Цитата(Gold Dragon @ 22.6.2011,  11:35)
там всё просто.. только для такого не хватит мощности наших хостингов smile 1000 челов зайдут и сервер базы ляжет

потому и наверно лучше в админке такое делать, там где точно 1000 юзеров не зайдёт =))

Автор: minka92 13.1.2013, 02:22
Всем привет)
Я новичок в яве скорее даже ламер, прошу вашей помощи,
В начале я планировал организовать поиск по сайту используя одно поле, вводишь текст а он по нему ищет результаты и выдает их в див, но столкнулся с проблемкой, когда вводишь данные слишком быстро запросы начинают теряться, решил оттянуть запрос чтобы они выполнялись через определенное время после последней вбитой в поле буквы и наткнулся на этот форум попроб-вал запихнуть функции постами выше, в существуюзий код, только выполняется он у меня когда загружается страница после загрузки и исполнения кода застывает в конце и не позволяет чего либо дописать в поле, может ли кто-нить помочь разобраться в чем проблема...

Код

<script>
            $(function() {
            var result = $('#result'); 
            var load = $('#load');
            var cu = 2;
            var search = $('#search').val();
            var timer = setInterval(function(){
            cu--;
            
            $('#search').keyup(function(){
            clearInterval(timer);
            });
            load.html('<br><b>ожидание окончания ввода данных</b>');

            if(cu == 0 ) {
            
            load.html('тест');
            result.fadeTo(500, 0.4);
                
                 
                    var year='".$year."';
                    var keystamp='564';
                    
                         $.ajax({
                            type: 'POST',
                            url: 'search.php',
                            data: {'search': search, 'year': year, 'keystamp': keystamp },
                            cache: false,                        
                            success: function(response){
                                        result.html(response);
                                        users.fadeTo(500, 1);
                                        load.html('');
                                     }
                         });
                         return false;
                         
                clearInterval(timer);
                }
                
                },2000); 
                
            });
        </script>

Автор: Aliance 14.1.2013, 10:21
Для этой задачи нужно использовать плагин jQuery под названием Throttle-debounce.

Автор: minka92 15.1.2013, 00:20
Спасибо прочитал про него значит то что выше выкидываем оставляя обработчик запроса и затачиваем под Throttle-debounce??

Сделал вот так и опять тишина библиотеку подключил (которая не min) :(

Код

 <script type='text/javascript'>
             $(function() {
            var result = $('#result'); 
            var load = $('#load');
            var search = $('#search').val();
            var year='".$year."';
            var keystamp='564';
                        
            function onKeyUp() { 

                    $.ajax({
                            type: 'POST',
                            url: 'search.php',
                            data: {'search': search, 'year': year, 'keystamp': keystamp },
                            cache: false,                        
                            success: function(response){
                                        result.html(response);
                                     }
                         });
                         return false;
                });
                                
            

            
            $('#search').keyup($.debounce(300, onKeyUp));
            
            
            
      });
                
       
        </script>


Посмотрите я на правильном пути??

Автор: Aliance 15.1.2013, 10:14
Нужно наверное было указать, откуда плагин берется. Если использовать http://code.google.com/p/jquery-debounce/, то там идет сначало название функции, а потом уже задержка.

http://habrahabr.ru/post/60957/

Вот пример реализации: http://jsfiddle.net/Aliance/LXAkU/

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)