Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Slider: как реализовать обработку? / 12 сообщений из 12, страница 1 из 1
03.02.2015, 21:29
    #38870805
Winnipuh
Winnipuh
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Slider: как реализовать обработку?
Есть страница, на ней слайдер, указывающий время от 0-10 сек.
Если число на слайдере >0, то запускается ajax запрос с таким интервалом и по полученным данным рисуется график.
Если выбран 0, то запросы не отсылаются и график не обновляется.

Чего хотелось бы:
Есть у слайдера одна callback функция onchangestate, и когда юзер тянет "бегунок" она вызывается десятки раз в секунду, образно говоря, и стартовать столько раз ajax как-то не красиво.

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

зы. нашел какой-то слайдер
http://egorkhmelev.github.io/jslider/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.02.2015, 09:28
    #38871035
-k2-
-k2-
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Slider: как реализовать обработку?
Winnipuh,

возможно
http://benalman.com/projects/jquery-throttle-debounce-plugin/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.02.2015, 10:22
    #38871097
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Slider: как реализовать обработку?
Winnipuh,

правильно подсказывают про микропаттерны оптимизации в Javascript: декораторы функций debouncing и throttling .

А для простоты можно обычный setTimeout использовать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.02.2015, 11:53
    #38871187
Winnipuh
Winnipuh
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Slider: как реализовать обработку?
спасибо, коллеги.

По gui:

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

Порекомендуйте приличный слайдер для выбора дискретных значений.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.02.2015, 12:06
    #38871208
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Slider: как реализовать обработку?
Winnipuh, что так сложно разобраться в debouncing?

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
function debounce(fn, args, context) {
  args = (args !== undefined) ? args : {};

  var t = (typeof(args) === 'object') ? (args.timeout || 500) : args;

  clearTimeout(fn.timeoutId);
  fn.timeoutId = setTimeout(function() { fn.call(context, args); }, t);
}


Ну и пример вызова Вашего onchangestate :
Код: javascript
1.
debounce(onchangestate, 150);
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.02.2015, 12:26
    #38871233
Winnipuh
Winnipuh
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Slider: как реализовать обработку?
skyANAWinnipuh, что так сложно разобраться в debouncing?

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
function debounce(fn, args, context) {
  args = (args !== undefined) ? args : {};

  var t = (typeof(args) === 'object') ? (args.timeout || 500) : args;

  clearTimeout(fn.timeoutId);
  fn.timeoutId = setTimeout(function() { fn.call(context, args); }, t);
}


Ну и пример вызова Вашего onchangestate :
Код: javascript
1.
debounce(onchangestate, 150);



не сложно, разибарюсь, но тяга к прекрасному иногда превалирует, хотя и отдаешь себе отчет в том, что перфекционизм - зло.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.02.2015, 12:59
    #38871290
-k2-
-k2-
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Slider: как реализовать обработку?
Winnipuh,

может тогда проще в прототип залезть
авторjSlider.prototype.setValue = function(){
var value = this.getValue();
this.inputNode.attr( "value", value );
if(ваше условие, по step или што там есть)
this.onstatechange.call( this, value );
};
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.02.2015, 13:00
    #38871294
-k2-
-k2-
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Slider: как реализовать обработку?
сорри

может тогда проще в прототип залезть
Код: javascript
1.
2.
3.
4.
5.
6.
jSlider.prototype.setValue = function(){
    var value = this.getValue();
    this.inputNode.attr( "value", value );
    if(ваше условие, по step или што там есть)
       this.onstatechange.call( this, value );
  };
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.02.2015, 13:19
    #38871330
Winnipuh
Winnipuh
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Slider: как реализовать обработку?
-k2-сорри

может тогда проще в прототип залезть
Код: javascript
1.
2.
3.
4.
5.
6.
jSlider.prototype.setValue = function(){
    var value = this.getValue();
    this.inputNode.attr( "value", value );
    if(ваше условие, по step или што там есть)
       this.onstatechange.call( this, value );
  };



Да, можно кстати и так, в этом случае не вызывается колбэк лишние разы, но вот ползунок ставится в любую позицию.

То есть, если юзер потянул и бросил его посреди - сейчас значение показывает ближайшее к дискретному справа или слева, но ползунок устанавливается, куда его до тянули. А хотелось бы, чтобы он прыгал жестко по дискретным значениям, ближайшим к дропнутой позиции.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.02.2015, 13:22
    #38871334
-k2-
-k2-
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Slider: как реализовать обработку?
Winnipuh,

http://seiyria.github.io/bootstrap-slider/
вот этим я точно пользовалась, change как нужно отрабатывает
Код: javascript
1.
2.
 var mySlider = $("input.slider").slider({step:100});
 mySlider.on("change", function(e){console.log(e.value)});
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.02.2015, 13:23
    #38871338
Winnipuh
Winnipuh
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Slider: как реализовать обработку?
Вопрос снят, нарыл там параметр не описанный, делает то, что нужно.
Спасибо!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.02.2015, 18:38
    #38871700
Winnipuh
Winnipuh
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Slider: как реализовать обработку?
skyANAWinnipuh, что так сложно разобраться в debouncing?

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
function debounce(fn, args, context) {
  args = (args !== undefined) ? args : {};

  var t = (typeof(args) === 'object') ? (args.timeout || 500) : args;

  clearTimeout(fn.timeoutId);
  fn.timeoutId = setTimeout(function() { fn.call(context, args); }, t);
}


Ну и пример вызова Вашего onchangestate :
Код: javascript
1.
debounce(onchangestate, 150);



debounce - это то, что надо! спасибо за подсказку.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Slider: как реализовать обработку? / 12 сообщений из 12, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 318ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1446307]:
 0ms
get settings:
 7ms
get forum list:
 9ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 48ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 29ms
get tp. blocked users:
 1ms
others: 212ms
total:  318ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]