Question

我需要一些暂停和恢复setTimeout函数的帮助。我正在使用的功能是由其他人编写的，因此我在解决它时遇到了一些麻烦。它使行星围绕太阳旋转。我可以暂停他们这不是问题，我的问题是能够从我暂停的地方恢复它们，目前当我恢复时它从一开始就再次启动循环

    function startRotations(){

    ( function ( $ ) {
        jQuery.fn.orbit = function(s, options)
        {
            var settings = {
                            orbits:    1     // Number of times to go round the orbit e.g. 0.5 = half an orbit
                           ,period:    3000  // Number of milliseconds to complete one orbit.
                           ,maxfps:    25    // Maximum number of frames per second. Too small gives "flicker", too large uses lots of CPU power
                           ,clockwise: true  // Direction of rotation.
                };
            $.extend(settings, options);  // Merge the supplied options with the default settings.

            return(this.each(function(){
                var p        = $(this);

/* First obtain the respective positions */

                var p_top    = p.css('top' ),
                    p_left   = p.css('left'),
                    s_top    = s.css('top' ),
                    s_left   = s.css('left');

/* Then get the positions of the centres of the objects */

                var p_x      = parseInt(p_top ) + p.height()/2,
                    p_y      = parseInt(p_left) + p.width ()/2,
                    s_x      = parseInt(s_top ) + s.height()/2,
                    s_y      = parseInt(s_left) + s.width ()/2;

/* Find the Adjacent and Opposite sides of the right-angled triangle */
                var a        = s_x - p_x,
                    o        = s_y - p_y;

/* Calculate the hypotenuse (radius) and the angle separating the objects */

                var r        = Math.sqrt(a*a + o*o);
                var theta    = Math.acos(a / r);

/* Calculate the number of iterations to call setTimeout(), the delay and the "delta" angle to add/subtract */

                var niters   = Math.ceil(Math.min(4 * r, settings.period, 0.001 * settings.period * settings.maxfps));
                var delta    = 2*Math.PI / niters;
                var delay    = settings.period  / niters;
                //var delay    = settings.period  / niters;
                if (! settings.clockwise) {delta = -delta;}
                niters      *= settings.orbits;

/* create the "timeout_loop function to do the work */  
                var timeout_loop = function(s, r, theta, delta, iter, niters, delay, settings){

                    timeout = setTimeout(function(){
/* Calculate the new position for the orbiting element */

                        var w = theta + iter * delta;
                        var a = r * Math.cos(w);
                        var o = r * Math.sin(w);
                        var x = parseInt(s.css('left')) + (s.height()/2) - a;
                        var y = parseInt(s.css('top' )) + (s.width ()/2) - o;

/* Set the CSS properties "top" and "left" to move the object to its new position */

                        p.css({top:  (y - p.height()/2),
                               left: (x - p.width ()/2)});

/* Call the timeout_loop function if we have not yet done all the iterations */

                        if (iter < (niters - 1))  timeout_loop(s, r, theta, delta, iter+1, niters, delay, settings);
                    }, delay);
                };

/* Call the timeout_loop function */

                timeout_loop(s, r, theta, delta, 0, niters, delay, settings);
            }));
        }
    }) (jQuery);

    $('#mercury').orbit($('#sun'), {orbits:  683, period:  2400});
    $('#venus').orbit($('#sun'), {orbits:  266, period:  6150});
    $('#earth').orbit($('#sun'), {orbits:  164, period:  10000});
    $('#mars').orbit($('#sun'), {orbits:  82, period:  18810});
    $('#jupiter').orbit($('#sun'), {orbits:  14, period:  118600});
    $('#saturn').orbit($('#sun'), {orbits:  6, period:  294600});
    $('#uranus').orbit($('#sun'), {orbits:  2, period:  840100});
    $('#neptune').orbit($('#sun'), {orbits:  1, period:  1648000});
}

$(document).ready(function() {

    var startRotate = new startRotations();

});

function pauseRotations()
{
    // NEED TO PAUSE HERE
}

function resumeRotations()
{
    // NEED TO RESUME HERE
}

Answer 1

你必须稍微重构代码然后你可以做这样的事情https://jsfiddle.net/kc60p111/8/

var Timer = (function() {
  function Timer(callback, delay) {
    this.callback = callback;
    this.delay = delay;
    this.loop = true;
  }

  Timer.prototype.pause = function() {
    this.loop = false;
  };

  Timer.prototype.resume = function() {
    this.loop = true;
  };

  Timer.prototype.start = function() {
    var that = this;
    window.setTimeout(function() {
      if (that.loop) {
        that.callback();
      }

      that.start();
    }, this.delay);
  };

  return Timer;
})();

var timer = new Timer(function() {
  console.log('orbit!')
}, 1000);

$('.pause').on('click', function() {
    console.log('pause');
    timer.pause();
});

$('.resume').on('click', function() {
    console.log('resume');
    timer.resume();
});

timer.start();

需要能够暂停和恢复SetTimeout

1 个答案: