0

I am making a progressbar and want it to play when it is in viewport. I got this working but the code is now executed every time and I need it to run only once. Because it creates now multiple progressbars. ;-) The code below is used in a Joomla Extension.

(function ($) {
  $(document).ready(function() {
    // Function that checks if it is in view.
    $("<?php echo '#progress' . $module->id ?>").waypoint(function() {
      // Function that makes sure it only runs once.
      // -----------I need to use .one() here but how?
       // The location of the progressbar code for now lets put a alert in.
       alert("run only once");
    }, {
      offset: '50%'
    });
  });
})(jQuery);

I have been reading up about the .one() function and how to use it in here. But I tried the examples that uses click and ready while click is not what I want but ready should do the trick but nothing worked.

purple11111
  • 709
  • 7
  • 20
  • _"but the code is now executed every time and I need it to run only once."_ Do you mean that the function should be called only once at `.ready()` or once for each browser session? – guest271314 Sep 26 '16 at 18:11
  • @guest271314 The code should be called only once at .ready() I think. I want it to run when the page is loaded and the div is in the middle of the screen. – purple11111 Sep 26 '16 at 18:14
  • @KevinB _"Waypoints is a library that makes it easy to execute a function whenever you scroll to an element."_ Believe OP is trying to call handler at most once. See [Waypoints](https://github.com/imakewebthings/waypoints), if that is same plugin. – guest271314 Sep 26 '16 at 18:22

1 Answers1

1

You can use $.Callbacks() with "once" as parameter.

(function ($) {
  $(document).ready(function() {

    function runOnce() {
      // Function that makes sure it only runs once.
      // -----------I need to use .one() here but how?
       // The location of the progressbar code for now lets put a alert in.
       alert("run only once");
    }

    var callbacks = $.Callbacks("once");

    callbacks.add(runOnce);
    // Function that checks if it is in view.
    $("<?php echo '#progress' . $module->id ?>").waypoint(function() {
      callbacks.fire(runOnce);
    }, {
      offset: '50%'
    });
  });
})(jQuery);
guest271314
  • 1
  • 15
  • 104
  • 177
  • This works perfect. I tried it with the alert first. Jackpot. Then with the progressbar code and again perfect result. Thank you very much. – purple11111 Sep 26 '16 at 18:19
  • 1
    Do you know why the question is downvoted? or where you can see the reason for a downvote! – purple11111 Sep 26 '16 at 18:21
  • _"Do you know why the question is downvoted? or where you can see the reason for a downvote!"_ No. Unfortunately, no descriptions of "downvote" for Question or Answer presently appear at comments. – guest271314 Sep 26 '16 at 18:23
  • Ok. I was wondering what did I do wrong :-). Thank you for the information and for the solution. Have a great day! – purple11111 Sep 26 '16 at 18:25
  • @purple11111 Note, have not previously used `waypoints`. Apparently there is a `triggerOnce` or `destroy` option; see http://stackoverflow.com/questions/16002273/jquery-waypoints-fire-once – guest271314 Sep 26 '16 at 18:26