如何在javascript中設置不斷遞增的計數器，當counter>確定值時執行另一操作？

Question

我是jquery和javascript的新手。 我需要在javascript中設置一個變量，該變量每秒鍾增加1。 為此，我做了以下工作：

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

   setInterval(run,1000);

一旦變量值> 5，我想啟用代碼，以便每當有人將鼠標懸停在html頁面中的iframe上時，就完成了ajax請求。

收到Ajax請求后，我想重置timer = 0。

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

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

  timer=0;
}

該過程應再次重復，計數器應再次從0到5開始，並且應再次激活ajax請求功能。

下面是將完整的代碼放在一個位置：

<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>

我做了很多嘗試，並且用谷歌搜索了很多，但是無法找出解決方案。

Answer 1

嘗試這個 ：

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);          

如果iframe上已經有mouseenter事件，則執行.off('mouseenter')會刪除這些綁定。

正如伊恩（Ian）所建議的那樣，您可以為事件命名，從而可以取消綁定指定綁定。

為此，只需在綁定/取消綁定時使用一個點：

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

Answer 2

使用函數備注可避免全局“計時器”變量：

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

setInterval(run,1000);

為了相應地執行計時器操作，請從run()運行處理，例如：

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
}

Answer 3

將您的if語句放入run()並將timer=0移至AJAX調用的success函數。

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

您的AJAX success應該看起來像success: function(data, status) { timer = 0;}在您的AJAX成功中，您將要unbind iframe懸停，然后在timer > 5時重新綁定它，以便在出現以下情況時刪除懸停功能計時器小於5。