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

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

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

Author24 — интернет-сервис помощи студентам
При анимации цифр использовал 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)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
19.05.2016, 09:56
Ответы с готовыми решениями:

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

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

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

Универсальный обработчик события
У меня такая проблема. Есть поле для ввода текста input type=&quot;text&quot;, и при вводе туда в блоке...

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

ссылка на 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 4
Лучший ответ Сообщение было отмечено 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  [ТС] 5
Михаил_96 - спасибо, все работает.
Мне стыдно, такая мелочь меня застопорила.

И сразу в вдогонку следующий вопрос:
- весь этот код я кладу на Ворд Пресс. Все работает кроме jquery.animateNumber http://aishek.github.io/jquery-animateNumber/. Он не отрабатывает.
На Ворд Пресс ложу тупо - создав новый проект и залив туда код.
Кстати это не первый раз, когда сторонние методы не отрабатывают на Ворд Пресс.
Где то конфликт наверное.
0
20 / 20 / 13
Регистрация: 22.11.2015
Сообщений: 109
22.05.2016, 22:06 6
Ну дело может быть во многом.
Может быть в двух библиотеках jquery или может ваш скрипт раньше запускается, чем запрос на метод.
Скиньте адрес вашего сайта.
0
22.05.2016, 22:06
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
22.05.2016, 22:06
Помогаю со студенческими работами здесь

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

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

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

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


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

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru