javascript execute function with time interval

Question

I have the simple function of changing content of container div. There is a <table> inside the container <div>, with 2 <td>s, the javascript simply moves left this <table> and it works, but onclick and I need to execute the moving function with time interval.

 <div onclick="move(this.children[0])" class="table_wrap">
 <div class="table_scroll" style="left: 0px;">

 <table cellpadding="0" cellspacing="5" width="1920px">
    <tr>
        <td style="background-color: red;">
            a
        </td>
        <td style="background-color: blue;">
            b
        </td>
    </tr>
 </table>

 </div>
 </div>

   <script language="javascript">
 function move(elem) {

          var left = 0

          function frame() {

            left -= 5;  // update parameters 

            elem.style.left = left + 'px' // show frame 

            if (left == -965)  // check finish condition
              clearInterval(id)
          }
          var id = setInterval(frame, 1) // draw every 10ms
        }

       </script>

And CSS:

 <style type="text/css">
 .table_wrap{
 position:relative;
 overflow:hidden;
 width: 967px;
 height: 250px;
 left: -2px;
 top: 5px;
 }
 .table_wrap .table_scroll{
 position: absolute;
 text-align:center;
 white-space:nowrap;
 }
 </style>

I tryed to use setInterval, but failed.

http://jsfiddle.net/hqztm2dt/1/ here is the JSfiddle, just click on the red line.. Thanks in advance for the attention !

`id` is a local variable, and will be destroyed as soon as the execution of `frame` has ended. You've to declare the said variable outside of `frame`. Also you'd probably need a `setTimeout` instead of `setInterval`. — Teemu, Feb 17 '15 at 11:56
If it works but not as expexted, perhaps your interval is too fast? setInterval takes in ms...so 1 = 1 ms regardless 10 ms is still really fast! — javajavajava, Feb 17 '15 at 11:56
the function works fine, the problem is that it's been executed by clicking on the div.. And I need it to be executed with time interval.. — , Feb 17 '15 at 12:02
Could you please include an example of where you try with `setInterval` (or preferably `setTimeout`)? — Jite, Feb 17 '15 at 12:07
It's pretty difficult to diagnose what you did wrong with your `setInterval` if you don't show us what you did. My gut feeling is that because you don't have an `id` on the `
` your code is no longer able to (easily) access it through the DOM — freefaller, Feb 17 '15 at 12:09
Thanks for the attention.. The answer of @Naeem Shaikh is what I needed — , Feb 17 '15 at 12:14

score 3 · Accepted Answer · answered Feb 17 '15 at 12:09

If you need to move it on interval, see this: http://jsfiddle.net/gsddsxgy/2/ (here the time interval is 3ms)

html:

<div  class="table_wrap">
 <div id='move' class="table_scroll" style="left: 0px;">

 <table cellpadding="0" cellspacing="5" width="1920px">
    <tr>
        <td style="background-color: red;">
            a
        </td>
        <td style="background-color: blue;">
            b
        </td>
    </tr>
 </table>

 </div>
 </div>

JS:

setInterval(function(){ 

var elem=document.getElementById('move');
 var left = 0

          function frame() {

            left -= 5;  // update parameters 

            elem.style.left = left + 'px' // show frame 

            if (left == -965)  // check finish condition
              clearInterval(id)
          }
          var id = setInterval(frame, 1) // draw every 10ms






    }, 3000);

If you need to move the div on click but after a little time gap, see this http://jsfiddle.net/gsddsxgy/

code:

function move(elem) {
setTimeout(function(){ 


 var left = 0

          function frame() {

            left -= 5;  // update parameters 

            elem.style.left = left + 'px' // show frame 

            if (left == -965)  // check finish condition
              clearInterval(id)
          }
          var id = setInterval(frame, 1) // draw every 10ms



}, 1000);

        }

@JaniBolkvadze:- glad, but can you share which one of the above solution helped you — Naeem Shaikh, Feb 17 '15 at 12:12
http://jsfiddle.net/gsddsxgy/2/ that's what I needed.. thank you for the attention.. — , Feb 17 '15 at 12:17
Once more question please: moving stops when (left == -965).. Then code executes moving again.. Should I use javascript Loop to stop it? I need it to be executed once. — , Feb 17 '15 at 12:32

score 0 · Answer 2 · answered Feb 17 '15 at 12:09

The problem with your code in jsFiddle is the move function isn't defined when trying to call it - if you use addEventListener you can bind the method to the click event using just javascript and not the onClick attribute. Using your code:

var elem = document.getElementById('wrapper');
elem.addEventListener('click', move);

function move() {

    var left = 0

    function frame() {

        left -= 5;  // update parameters 

        elem.style.left = left + 'px' // show frame 

        if (left == -965)  // check finish condition
            clearInterval(id)
        }

    var id = setInterval(frame, 1) // draw every 10ms
}

JS fiddle - http://jsfiddle.net/b1q7poj4/2/

javascript execute function with time interval

2 Answers2