0

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>
5
  • 2
    Look at existing timer functions developer.mozilla.org/en-US/Add-ons/Code_snippets/Timers Commented Jul 20, 2016 at 14:22
  • 1
    Look at setTimeout() Commented Jul 20, 2016 at 14:24
  • setTimeout(function() { $('.timer').each(count); }, 10000); Commented Jul 20, 2016 at 14:24
  • Thanks for replying, I'm quite new to editing javascript, where would you suggest I put this code? Commented Jul 20, 2016 at 14:33
  • Possible duplicate of Sleep/Pause/Wait in Javascript Commented Jul 20, 2016 at 15:37

1 Answer 1

2

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

Sign up to request clarification or add additional context in comments.

8 Comments

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?
I didn't understand what you mean, but I think you will understand better with this post
I think, if I understood your code, you can use like this setTimeout($.fn.countTo, 10000, options);
The first arg is your function, the second is the delay time in miliseconds, and the last one your params
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?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.