Delay Javascript

Question

I have this code which is a piece of code that counts up numbers to a certain target, I need to delay the script for about 10 seconds before it starts counting up. I'm quite new to it all and so far I've tried implementing the delay function but I don;t think I'm using it correctly, any help would be appreciated, code below -

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>

• anvk: Look at existing timer functions developer.mozilla.org/en-US/Add-ons/Code_snippets/Timers
• Brett Gregson: Look at setTimeout()
• nnnnnn: setTimeout(function() { $('.timer').each(count); }, 10000);
• Lucy Brown: Thanks for replying, I'm quite new to editing javascript, where would you suggest I put this code?
• rnevius: Possible duplicate of Sleep/Pause/Wait in Javascript

Answer 1

You can use setTimeout to do this

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

In first arg you pass the function that can be yours, and the second arg you pass a value in miliseconds to execute the function

EDIT

Syntax: setTimeout(function,milliseconds,param1,param2,...)

Reference: w3schools

• Lucy Brown: Thanks! I'll give it a go, I'm quite new to actually editing javascript. So are you saying that I pass the setTimeout function in the frst argument and then execute it in the second?
• rneves: I didn't understand what you mean, but I think you will understand better with this post
• rneves: I think, if I understood your code, you can use like this setTimeout($.fn.countTo, 10000, options);
• rneves: The first arg is your function, the second is the delay time in miliseconds, and the last one your params
• Lucy Brown: Ok, this makes sense. I've read the article, it makes more sense to me now. Thanks so much. I'm just struggling with where I would put this code in my code, if you have any suggestions?