如何为这个jquery增量插件编写一个函数？

Question

I have found a nice jquery increment script. The increment portion can accept a function or just a regular number. I am looking to increase at a random number between 1 and 100. How would I write the function for this?

$( document ).ready( function()
{
  $( '.tick' ).ticker(
  {
    incremental : 1,
    delay       : 1500,
    separators  : true
  });
   $(".comma-change").html(".");  
});

<span class="tick">2,354,456</span>

So rather than increase by 1 in the incremental field, I would like to write a function that updates with a random number. With the help of other posts I can write the function that creates a random number no problem:

function random_generator (min, max) {
    return Math.random() * (max - min) + min;
}

but I am having trouble working it into this directly.

Here is the increment portion of the plugin:

  Tick = (function() {

    function Tick(element, options) {
      this.element = element;
      if (options == null) options = {};
      this.running = false;
      this.options = {
        delay: options.delay || 1000,
        separators: options.separators != null ? options.separators : false,
        autostart: options.autostart != null ? options.autostart : true
      };
      this.increment = this.build_increment_callback(options.incremental);
      this.value = Number(this.element.html().replace(/[^\d.]/g, ''));
      this.separators = this.element.html().trim().split(/[\d]/i);
      this.element.addClass('tick-active');
      if (this.options.autostart) this.start();
    }

    Tick.prototype.build_increment_callback = function(option) {
      if ((option != null) && {}.toString.call(option) === '[object Function]') {
        return option;
      } else if (typeof option === 'number') {
        return function(val) {
          return val + option;
        };
      } else {
        return function(val) {
          return val + 1;
        };
      }
    };

and then this bit:

Tick.prototype.tick = function() {
  this.value = this.increment(this.value);
  this.render();
  return this.set_timer();
};

Answer 1

You probably have to update the source of the increment script. But if you're lucky, you might be able to use some trickery to do without.

It's possible that the increment script has something like this in there:

function(options) {
    //...
    currentValue += options.incremental;
    //...
}

If that's the case, you could adjust the value of options.incremental periodically after the fact, like so:

var opts;
$( '.tick' ).ticker(opts = {
    incremental : 1,
    delay       : 1500,
    separators  : true
});

setInterval(function () { 
    var min = 1, max = 100; //adjust min/max to suit your needs.
    opts.incremental = Math.random() * (max - min) + min;
}, 500); //any number under 1500 is probably fine

This is a bit of a hack, but it might work. Might be easier than updating the code of the plugin. If it doesn't work, you'll probably have to enhance the plugin directly.

Answer 2

All you need to do is translate your function statement into a function expression. A function statement defines a name and assigns it a function whereas a function expression is the function itself (an anonymous function).

You can set the value of a variable to a function like this

var random_generator = function(min, max) {
    return Math.random() * (max - min) + min;
};

and then pass the reference to this function (the variable random_generator) as the incremental to your plugin. Or you could inline the function definition like this:

$( '.tick' ).ticker({
    incremental : function(currentValue) {
                     // currentValue really is the current value of the ticker
                     // this is because the code inside the ticker plugin, that triggers
                     // your function, will take care of passing it as a parameter in
                     return +currentValue + random_generator(1, 100);
                  },
    delay       : 1500,
    separators  : true
});

edit: I didn't realize, that your function has two parameters... that makes the whole thing a little bit more sophisticated. You could either hardcode min and max into your function (because the function gets invoked by code from the plugin and you will most definitely not get any arguments), or wrap another anonymous function around it, that provides the two parameters for us.

Final edit: I guess you are using this plugin https://github.com/harvesthq/tick ? This plugin can accept a function that will be called every tick and gets passed in the current value of the ticker. You have to provide the new value. I updated the code snippet accordingly.