I am new to jquery and javascript . I need to set up a variable in javascript which is incrementing by 1 after each second . For that I did following :

    function run(){         
      timer++;  
    }// run ends here

   setInterval(run,1000);

Once the variable value is > 5, I want to enable code such that, whenever somebody hovers over iframe in html page, ajax request is done .

After sinigle ajax request I want to reset timer= 0.

if(timer>5){
$("iframe").hover(function(){

        $.ajax({
          url:     'http://localhost/test.html',
          cache:   false,
          data:    'html',
          success: function(data,status) {
          }
        });          
});

  timer=0;
}

This process should repeat again, counter should again start from 0 to 5 and ajax request functionality should be activated again .

Below is the plete code in one place :

<script>

var i = 0;
var timer=0;

        function run(){         
            timer++;    
        }// run ends here

        setInterval(run,1000);          

        if(timer>5){
        $("iframe").hover(function(){

                $.ajax({
                  url:     'http://localhost/test.html',
                  cache:   false,
                  data:    'html',
                  success: function(data,status) {
                  }
                });          
        });

          timer=0;
        }

</script>

I tried a lot and googled a lot, but was not able to figure out the solution .

I am new to jquery and javascript . I need to set up a variable in javascript which is incrementing by 1 after each second . For that I did following :

    function run(){         
      timer++;  
    }// run ends here

   setInterval(run,1000);

Once the variable value is > 5, I want to enable code such that, whenever somebody hovers over iframe in html page, ajax request is done .

After sinigle ajax request I want to reset timer= 0.

if(timer>5){
$("iframe").hover(function(){

        $.ajax({
          url:     'http://localhost/test.html',
          cache:   false,
          data:    'html',
          success: function(data,status) {
          }
        });          
});

  timer=0;
}

This process should repeat again, counter should again start from 0 to 5 and ajax request functionality should be activated again .

Below is the plete code in one place :

<script>

var i = 0;
var timer=0;

        function run(){         
            timer++;    
        }// run ends here

        setInterval(run,1000);          

        if(timer>5){
        $("iframe").hover(function(){

                $.ajax({
                  url:     'http://localhost/test.html',
                  cache:   false,
                  data:    'html',
                  success: function(data,status) {
                  }
                });          
        });

          timer=0;
        }

</script>

I tried a lot and googled a lot, but was not able to figure out the solution .

• javascript
• jquery

3 Answers 3

Try this :

var timer=0;

function run(){         
    timer++;    

    if(timer == 5){
        $("iframe").on('mouseenter', function(){

            $.ajax({
                url:     'http://localhost/test.html',
                cache:   false,
                data:    'html',
                success: function(data,status) {
                    timer=0;
                    $('iframe').off('mouseenter')
                }
            });          
        });

    }
}// run ends here

setInterval(run,1000);          

If you already have mouseenter event on you iframe, doing .off('mouseenter') will delete those binding.

As Ian suggested, you can name you event allowing you to unbind specifique binding.

To do it, just use a dot when bind/unbinding:

$("iframe").on('mouseenter.timer',...)
$('iframe').off('mouseenter.timer')

Use function memoization to avoid global "timer" variables:

function run(){
  run.timer = run.timer || 0;   
  return run.timer++;
} // run ends here

setInterval(run,1000);

And to act accordingly to the timer, run your handling from run(), for example:

function run(){
    run.timer = run.timer || 0;   
    run.timer = handleTimer(run.timer++);
} // run ends here

setInterval(run,1000);

function handleTimer(timer) {
    if(timer > 5){
        $("iframe").hover(function(){
            $.ajax({
                url:     'http://localhost/test.html',
                cache:   false,
                data:    'html',
                success: function(data,status) {
                }
            }); 
            // And disable hover handler once executed
            $("iframe").unbind("mouseenter mouseleave");
        });
        return 0;
    }

    return timer; // continue timer chaining
}

Put your if statement in run() and move timer=0 to the success function of your AJAX call.

function run() {
    timer ++;
    if(timer == 5) {
        //Your ajax here
    }
}

Your AJAX success should look like success: function(data, status) { timer = 0;} In your AJAX success, you will want to unbind your iframe hover, and then rebind it when timer > 5 so that the hover functionality is removed when the timer is less than 5.