VPF::JQuery. Задержка выполнения скрипта

Gold Dragon

Дата 16.5.2011, 14:51 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71

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

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

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

Код


$("#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 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

.stop() попробуйте

Код


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

Gold Dragon

Дата 16.5.2011, 15:03 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71

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

заменил 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 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

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

Gold Dragon

Дата 16.5.2011, 15:12 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71

это форма поиска на сайте... и постоянно таймер иметь не лучший способ.....

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

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

--------------------

нуп

Дата 16.5.2011, 15:14 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

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

Gold Dragon

Дата 16.5.2011, 15:16 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71

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

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

так?

--------------------

нуп

Дата 16.5.2011, 15:22 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

Нет. Строите форму и просто вешаете таймер.

Gold Dragon

Дата 16.5.2011, 15:28 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71

нуп, ты мне предлагаешь постоянно работающий таймер?

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

--------------------

нуп

Дата 16.5.2011, 15:42 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

Код


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);

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

Это сообщение отредактировал(а) нуп - 16.5.2011, 15:52

Gold Dragon

Дата 17.5.2011, 07:32 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71

нуп, а твой код сколько раз выполняется? smile

--------------------

ksnk

Дата 17.5.2011, 08:19 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386

Код


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);
})

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

нуп

Дата 17.5.2011, 08:19 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 8
Всего: 33

Я не навязываю его, для этой задачи я бы сделал так.

Gold Dragon

Дата 17.5.2011, 10:15 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71

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 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 9
Регистрация: 21.6.2011

Репутация: 1
Всего: 1

спасибо за ваш вариант кода, кое что использовал, но опять же остались вопросы, почему обработчику пхп достаются слова, предшествующие окончательному слову? Например слово 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, 07:56

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »