Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.91/11: Рейтинг темы: голосов - 11, средняя оценка - 4.91
1 / 1 / 1
Регистрация: 03.01.2016
Сообщений: 15

Обработчик события зацикливается

19.05.2016, 09:56. Показов 2443. Ответов 5
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
При анимации цифр использовал jquery.animateNumber.

Возникла маленькая загвоздка

HTML5
1
2
3
4
5
6
7
8
9
10
<p id="ten">From ten to hundred.</p>
 
$('#ten')
  .prop('number', 10)
  .animateNumber(
    {
      number: 100
    },
    20000
  );
функция работает и срабатывает один раз.

НО КОГДА так -

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var timer666 = function() {
 
 $('#ten')
  .prop('number', 0) //бежать от 0
  .animateNumber(
    {
      number: 9000 // до 9000
    },
    1000 // за 1 секунду
  );
  
  $('#ten1')
  .prop('number', 0)
  .animateNumber(
    {
      number: 230000
    },
    1000
  );
};
и вызываю - timer666 (); на событие, то она зацикливается.
Вызов функции стоит при заходе на определенную секцию в разметке HTML.

Как запустить ее единожды без зацикливания???
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
19.05.2016, 09:56
Ответы с готовыми решениями:

Не работает обработчик события
в результате выполнения функции $('#r_1lvl').append('&lt;div class=&quot;re&quot;&gt;&lt;/div&gt;') получаю: &lt;div id=&quot;r_1lvl&quot;&gt; &lt;div...

Обработчик события Mousedown
Народ я полный ноль в js вот есть код (не мой) &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; ...

Привязать обработчик события
Есть кнопка на нажатие привязываю обработчик: $(document).ready(function(){ $('#bn_start').click(function(){ ...

5
20 / 20 / 13
Регистрация: 22.11.2015
Сообщений: 109
19.05.2016, 23:19
Во первых - для библиотеки jquery есть соответствующий раздел на форуме - jquery. Раздел javascript для чистого javascript'a.
Во вторых - где вообще ссыль на метод animateNumber? В официальном jqueryUI его нет.
В третьих - я даже не могу протестировать нормально код из-за отсутствия данного метода..
Мы по-вашему еще должны искать ваш AnimateColor? Сомневаюсь. Скидывайте тогда уж свой нерабочий код на каком-то codepen'e.
1
1 / 1 / 1
Регистрация: 03.01.2016
Сообщений: 15
20.05.2016, 13:01  [ТС]
таки да. Все по порядку.

ссылка на jquery.animateNumber http://aishek.github.io/jquery-animateNumber/
Кликните здесь для просмотра всего текста
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
/** @preserve jQuery animateNumber plugin v0.0.13
 * (c) 2013, Alexandr Borisov.
 * [url]https://github.com/aishek/jquery-animateNumber[/url]
 */
 
// ['...'] notation using to avoid names minification by Google Closure Compiler
(function($) {
  var reverse = function(value) {
    return value.split('').reverse().join('');
  };
 
  var defaults = {
    numberStep: function(now, tween) {
      var floored_number = Math.floor(now),
          target = $(tween.elem);
 
      target.text(floored_number);
    }
  };
 
  var handle = function( tween ) {
    var elem = tween.elem;
    if ( elem.nodeType && elem.parentNode ) {
      var handler = elem._animateNumberSetter;
      if (!handler) {
        handler = defaults.numberStep;
      }
      handler(tween.now, tween);
    }
  };
 
  if (!$.Tween || !$.Tween.propHooks) {
    $.fx.step.number = handle;
  } else {
    $.Tween.propHooks.number = {
      set: handle
    };
  }
 
  var extract_number_parts = function(separated_number, group_length) {
    var numbers = separated_number.split('').reverse(),
        number_parts = [],
        current_number_part,
        current_index,
        q;
 
    for(var i = 0, l = Math.ceil(separated_number.length / group_length); i < l; i++) {
      current_number_part = '';
      for(q = 0; q < group_length; q++) {
        current_index = i * group_length + q;
        if (current_index === separated_number.length) {
          break;
        }
 
        current_number_part = current_number_part + numbers[current_index];
      }
      number_parts.push(current_number_part);
    }
 
    return number_parts;
  };
 
  var remove_precending_zeros = function(number_parts) {
    var last_index = number_parts.length - 1,
        last = reverse(number_parts[last_index]);
 
    number_parts[last_index] = reverse(parseInt(last, 10).toString());
    return number_parts;
  };
 
  $.animateNumber = {
    numberStepFactories: {
      /**
       * Creates numberStep handler, which appends string to floored animated number on each step.
       *
       * @example
       * // will animate to 100 with "1 %", "2 %", "3 %", ...
       * $('#someid').animateNumber({
       *   number: 100,
       *   numberStep: $.animateNumber.numberStepFactories.append(' %')
       * });
       *
       * @params {String} suffix string to append to animated number
       * @returns {Function} numberStep-compatible function for use in animateNumber's parameters
       */
      append: function(suffix) {
        return function(now, tween) {
          var floored_number = Math.floor(now),
              target = $(tween.elem);
 
          target.prop('number', now).text(floored_number + suffix);
        };
      },
 
      /**
       * Creates numberStep handler, which format floored numbers by separating them to groups.
       *
       * @example
       * // will animate with 1 ... 217,980 ... 95,217,980 ... 7,095,217,980
       * $('#world-population').animateNumber({
       *    number: 7095217980,
       *    numberStep: $.animateNumber.numberStepFactories.separator(',')
       * });
       * @example
       * // will animate with 1% ... 217,980% ... 95,217,980% ... 7,095,217,980%
       * $('#salesIncrease').animateNumber({
       *   number: 7095217980,
       *   numberStep: $.animateNumber.numberStepFactories.separator(',', 3, '%')
       * });
       *
       * @params {String} [separator=' '] string to separate number groups
       * @params {String} [group_length=3] number group length
       * @params {String} [suffix=''] suffix to append to number
       * @returns {Function} numberStep-compatible function for use in animateNumber's parameters
       */
      separator: function(separator, group_length, suffix) {
        separator = separator || ' ';
        group_length = group_length || 3;
        suffix = suffix || '';
 
        return function(now, tween) {
          var floored_number = Math.floor(now),
              separated_number = floored_number.toString(),
              target = $(tween.elem);
 
          if (separated_number.length > group_length) {
            var number_parts = extract_number_parts(separated_number, group_length);
 
            separated_number = remove_precending_zeros(number_parts).join(separator);
            separated_number = reverse(separated_number);
          }
 
          target.prop('number', now).text(separated_number + suffix);
        };
      }
    }
  };
 
  $.fn.animateNumber = function() {
    var options = arguments[0],
        settings = $.extend({}, defaults, options),
 
        target = $(this),
        args = [settings];
 
    for(var i = 1, l = arguments.length; i < l; i++) {
      args.push(arguments[i]);
    }
 
    // needs of custom step function usage
    if (options.numberStep) {
      // assigns custom step functions
      var items = this.each(function(){
        this._animateNumberSetter = options.numberStep;
      });
 
      // cleanup of custom step functions after animation
      var generic_complete = settings.complete;
      settings.complete = function() {
        items.each(function(){
          delete this._animateNumberSetter;
        });
 
        if ( generic_complete ) {
          generic_complete.apply(this, arguments);
        }
      };
    }
 
    return target.animate.apply(target, args);
  };
 
}(jQuery));


JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
var widthLine;
 
$(window).on("scroll resize", function () {
  var pos = $('#date').offset();
  $('.all_section').each(function () {
    if (pos.top + 100 >= $(this).offset().top && pos.top + 100 <= $(this).next().offset().top) {
      var valLi = $(this).attr("id");
      var num = parseInt(valLi.replace(/\D+/g, ""));
      currentBlock = num;
      $("#labelMain li").removeClass("label_activ");
      $("#labelMain li:nth-child(" + num + ")").addClass("label_activ");
 
      switch (valLi) {
        case "section2":
          $(".section2_left p, .section2_left h2").css("visibility", "visible");
          $(".section2_left h2").addClass("fadeIn22");
          $(".section2_left p").addClass("fadeIn22");
          break;
        case "section3":
          $(".section3_right h2, .section3_right p").css("visibility", "visible");
          $(".section3_right h2").addClass("fadeIn22");
          $(".section3_right p").addClass("fadeIn22");
          break;
        case "section4":
          $(".wrap_promotion h2, .section4_main_text, .section4_text").css("visibility", "visible");
          $(".wrap_promotion h2").addClass("fadeIn22");
          $(".section4_main_text").addClass("fadeIn22");
          $(".section4_text").addClass("fadeIn222");
          break;
        case "section5":
          $(".wrap_promotion2 h2, .section5_main_text").css("visibility", "visible");
          $(".wrap_promotion2 h2").addClass("fadeIn22");
          $(".section5_main_text").addClass("fadeIn22");
          break;
 
        case "section6":
          timer666 (); // [B]если от сюда то зацикливается раз 25, иногда 15. беда тут таки[/B]
 
          // (function(){timer666()})()
          // (function(){console.log("timer666()")})()
          // console.log("timer666()");
         
          break;
        case "section7":
          //section_our_site
          $(".section_our_site h2, .section_our_site p, .section_our_site .img_ceo, .section_our_site .wrap_block").css("visibility", "visible");
          $(".section_our_site h2").addClass("animated fadeIn");
          $(".section_our_site p").addClass("animated fadeInUp");
          $(".section_our_site .img_ceo").addClass("animated fadeIn");
          $(".section_our_site .wrap_block").addClass("animated flipInX");
          break;
      }
      return;
    }
  });
});
 
var timer666 = function() {
 
   $('#ten')
    .prop('number', 0)
    .animateNumber(
      {
        number: 9000
      },
      1000   
    );
 
  
  $('#ten1')
  .prop('number', 0)
  .animateNumber(
    {
      number: 230000
    },
    1000
  );
 
  $('#ten2')
  .prop('number', 0)
  .animateNumber(
    {
      number: 16000
    },
    1000
  );
 
  $('#countdown')
  .prop('number', 0)
  .animateNumber(
    {
      number: 7000
    },
    1000,
    function() {
      $('#countdown').text('7000')
    }
  );
 
   $('#ten5')
  .prop('number', 0)
  .animateNumber(
    {
      number: 2
    },
    1000
  );
 
  $('#ten66')
  .prop('number', 0)
  .animateNumber(
    {
      number: 3
    },
    1000
  );
 
  $('#ten666')
  .prop('number', 0)
  .animateNumber(
    {
      number: 5
    },
    1000
  );
 
};
 
// timer666 (); [B]если запускаю от сюда то на загрузку отрабатывает один раз как положено[/B]
если вызов с 37 строки то зацикливается,
если с 129 то норм, отрабатывает 1 раз но на загрузку, а нужно при скроле на 6 секцию
0
20 / 20 / 13
Регистрация: 22.11.2015
Сообщений: 109
20.05.2016, 16:09
Лучший ответ Сообщение было отмечено balabyshka как решение

Решение

Ну так
У вас же событие на скролл, а он за одну прокрутку вызывает функцию где-то 20 раз, и вот поэтому и получается, что 20 раз ваша функция циклится..
Есть же метод stop, вы можете его перед выполнением вызывать.
JavaScript
1
2
3
4
5
6
7
8
9
 $('#ten')
  .stop()
  .prop('number', 0) //бежать от 0
  .animateNumber(
    {
      number: 9000 // до 9000
    },
    1000 // за 1 секунду
  );
Песочница

Добавлено через 8 минут
Если же вы хотите вообще один раз вызывать, то можете какую нибудь проверку написать, типа тру - срабатывать, фолз - нет.
0
1 / 1 / 1
Регистрация: 03.01.2016
Сообщений: 15
22.05.2016, 21:32  [ТС]
Михаил_96 - спасибо, все работает.
Мне стыдно, такая мелочь меня застопорила.

И сразу в вдогонку следующий вопрос:
- весь этот код я кладу на Ворд Пресс. Все работает кроме jquery.animateNumber http://aishek.github.io/jquery-animateNumber/. Он не отрабатывает.
На Ворд Пресс ложу тупо - создав новый проект и залив туда код.
Кстати это не первый раз, когда сторонние методы не отрабатывают на Ворд Пресс.
Где то конфликт наверное.
0
20 / 20 / 13
Регистрация: 22.11.2015
Сообщений: 109
22.05.2016, 22:06
Ну дело может быть во многом.
Может быть в двух библиотеках jquery или может ваш скрипт раньше запускается, чем запрос на метод.
Скиньте адрес вашего сайта.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
22.05.2016, 22:06
Помогаю со студенческими работами здесь

Универсальный обработчик события
У меня такая проблема. Есть поле для ввода текста input type=&quot;text&quot;, и при вводе туда в блоке &lt;h1&gt;&lt;/h1&gt; inner.HTML'ом сразу же...

Не работает обработчик события
$(&quot;.dropdown-label&quot;).click(function() { $(&quot;.dropdown-label&quot;).addClass(&quot;open&quot;); }) Такая конструкция не работает, а если делать...

Обработчик события на mousemove
Добрый день уважаемые. Подскажите пожалуйста, как написать правильно функцию которая будет следить за положением курсора на экране и...

Обработчик события change
Подскажите пожалуйста, как создать обработчик события, который отслеживает изменение содержимого div или span ? Этот код не работает: ...

Не получается найти обработчик события
Добрый день На сайте nstk.ru (joomla 2.5) не могу найти скрипт который меняет атрибут style вот здесь: &lt;div...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Первый деплой
lagorue 16.01.2026
Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes
lagorue 13.01.2026
А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru