setInterval to requestAnimationFrame

Question

how to convert the following setInterval() to requestAnimationFrame()?

Below is a simple working setInterval model that I'm using.

$(document).ready(function() {
    $("#add").click(function() {
         $('#result').html(
             (parseFloat($('#numA').val()) + 
              parseFloat($('#numB').val())).toString()
         );
    });
    setInterval(function () {$("#add").click()}, 1000);
});

http://jsfiddle.net/nqqfq/4/

I've seen one that requires loop (game loop), but my code isn't about gaming. It's about parsing strings.

The documentation is a bit complicated. I've tried some trial-errors, but no success so far.

Thank you for any input.

Why are you doing this? Can't you just add keyup or change event to the inputs? — elclanrs, Jul 27 '14 at 07:33
@elclanrs There are online interpreters similar to jsfiddle that auto-update. It's very cool that it inspired me to implement that. — user3163916, Jul 27 '14 at 07:34

score 1 · Accepted Answer · answered Jul 27 '14 at 07:38

1

You need to invoke requestAnimationFrame repeatedly, for example:

!function frame() {
  $('#add').click()
  requestAnimationFrame(frame)
}()

Demo: http://jsfiddle.net/nqqfq/6/

answered Jul 27 '14 at 07:38

elclanrs

92,861
21
134
171

Yes, it's an IIFE, see this question http://stackoverflow.com/questions/8228281/what-is-this-iife-construct-in-javascript – elclanrs Jul 27 '14 at 07:40

setInterval to requestAnimationFrame

1 Answers1