2016-07-20 2 views
0

У меня есть этот код, который является частью кода, который подсчитывает числа до определенной цели, мне нужно отложить сценарий примерно на 10 секунд, прежде чем он начнет подсчет. Я совершенно новой для него все, и до сих пор я пытался реализации функции задержки, но я не; т думаю, что я использую его правильно, любая помощь будет оценена, ниже код -Задержка Javascript

https://www.innovationbham.com/

<script> 


      (function ($) { 
    $.fn.countTo = function (options) { 
     options = options || {}; 

     return $(this).each(function() { 
      // set options for current element 
      var settings = $.extend({}, $.fn.countTo.defaults, { 
       from:   $(this).data('from'), 
       to:    $(this).data('to'), 
       speed:   $(this).data('speed'), 
       refreshInterval: $(this).data('refresh-interval'), 
       decimals:  $(this).data('decimals') 
      }, options); 

      // how many times to update the value, and how much to increment the value on each update 
      var loops = Math.ceil(settings.speed/settings.refreshInterval), 
       increment = (settings.to - settings.from)/loops; 

      // references & variables that will change with each update 
      var self = this, 
       $self = $(this), 
       loopCount = 0, 
       value = settings.from, 
       data = $self.data('countTo') || {}; 

      $self.data('countTo', data); 

      // if an existing interval can be found, clear it first 
      if (data.interval) { 
       clearInterval(data.interval); 
      } 
      data.interval = setInterval(updateTimer, settings.refreshInterval); 

      // initialize the element with the starting value 
      render(value); 

      function updateTimer() { 
       value += increment; 
       loopCount++; 

       render(value); 

       if (typeof(settings.onUpdate) == 'function') { 
        settings.onUpdate.call(self, value); 
       } 

       if (loopCount >= loops) { 
        // remove the interval 
        $self.removeData('countTo'); 
        clearInterval(data.interval); 
        value = settings.to; 

        if (typeof(settings.onComplete) == 'function') { 
         settings.onComplete.call(self, value); 
        } 
       } 
      } 

      function render(value) { 
       var formattedValue = settings.formatter.call(self, value, settings); 
       $self.html(formattedValue); 
      } 
     }); 
    }; 

    $.fn.countTo.defaults = { 
     from: 0,    // the number the element should start at 
     to: 0,     // the number the element should end at 
     speed: 100,   // how long it should take to count between the target numbers 
     refreshInterval: 100, // how often the element should be updated 
     decimals: 0,   // the number of decimal places to show 
     formatter: formatter, // handler for formatting the value before rendering 
     onUpdate: null,  // callback method for every time the element is updated 
     onComplete: null  // callback method for when the element finishes updating 
    }; 

    function formatter(value, settings) { 
     return value.toFixed(settings.decimals); 
    } 
}(jQuery)); 

jQuery(function ($) { 
    // custom formatting example 
    $('#count-number').data('countToOptions', { 
    formatter: function (value, options) { 
     return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ','); 
    } 
    }); 

    // start all the timers 
    $('.timer').each(count); 

    function count(options) { 
    var $this = $(this); 
    options = $.extend({}, options || {}, $this.data('countToOptions') || {}); 
    $this.countTo(options); 
    } 

}); 

</script> 





<div class="wrapper-count"> 
    <div class="counter col_fourth"> 
     <i class="fa fa-code fa-2x"></i> 
     <h2 class="timer count-title" id="count-number" data-to="140" data-speed="2500"></h2><span><img src="<?php the_field('first_image');?>"></span> 
    </div> 

    <div class="counter col_fourth"> 
     <i class="fa fa-coffee fa-2x"></i> 
     <h2 class="timer count-title" id="count-number" data-to="180" data-speed="2500"></h2><span><img src="<?php the_field('second_image');?>"></span> 
    </div> 

    <div class="counter col_fourth"> 
     <i class="fa fa-lightbulb-o fa-2x"></i> 
     <h2 class="timer count-title" id="count-number" data-to="400" data-speed="2500"></h2><span><img src="<?php the_field('third_image');?>"></span> 
    </div> 

    <div class="counter col_fourth end"> 
     <i class="fa fa-bug fa-2x"></i> 
     <span>£</span><h2 class="timer count-title" id="count-number" data-to="11" data-speed="2500"></h2><span>m</span><span><img src="<?php the_field('fourth_image');?>"></span> 
    </div> 
</div> 


<div class="wrapper-count-2"> 
    <div class="counter col_fourth-2"> 
     <p class="count-text-2 ">Startups incubated to date</p> 
    </div> 

    <div class="counter col_fourth-2"> 
     <p class="count-text-2 ">Events held annually</p> 
    </div> 

    <div class="counter col_fourth-2"> 
     <p class="count-text-2 ">Community of digital and tech entrepreneurs</p> 
    </div> 

    <div class="counter col_fourth end-2"> 
     <p class="count-text-2 ">Start-up funding raised so far</p> 
    </div> 
</div> 
+2

Посмотрите на существующие функции таймера https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Timers – anvk

+1

Посмотрите в [setTimeout()] (https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout) –

+0

'setTimeout (функция() {$ ('. timer'). each (count); }, 10000); ' – nnnnnn

ответ

2

вы можете использовать setTimeout сделать это

setTimeout(function(){ alert("Hello"); }, 3000); 

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

EDIT

Синтаксис: setTimeout(function,milliseconds,param1,param2,...)

Ссылка: w3schools

+0

Спасибо! Я отдам это, я совершенно новый, чтобы фактически редактировать javascript. Так вы говорите, что я передаю функцию setTimeout в аргументе frst, а затем выполняю ее во втором? –

+1

Я не понял, что вы имеете в виду, но я думаю, что вы поймете лучше с этим [post] (http://www.w3schools.com/jsref/met_win_settimeout.asp) – rneves

+0

Я думаю, если бы я понял ваш код, вы может использовать как 'setTimeout ($. fn.countTo, 10000, options);' – rneves

Смежные вопросы