计时器间隔不起作用 Javascript

Timer Interval not working Javascript

本文关键字：Javascript 不起作用 计时器      更新时间：2023-09-26

所以我正在尝试使用计时器间隔运行一个弹出脚本，无论出于何种原因，计时器不计算它只是在加载时触发。

idleTime = 0;
$(document).ready(function() {
    $limit = 5;
    if ($.cookie('newVisit') != '1') {
        $.get('/pop_form.htm', function(data) {
            $('.subs-popup').html(data);
        });
        function timerIncrement() {
            idleTime++;
            if (idleTime > $limit) {
                $('.subs-popup ').show();
                idleTime = 0;
            }
        }
        var idleInterval = setInterval(timerIncrement, 1000); // 1 second
        $(this).mousemove(function(e) {
            idleTime = 0;
        });
        $(this).keypress(function(e) {
            idleTime = 0;
        });
        $.cookie('newVisit', '1', {
            expires: 364,
            path: "/"
        });
    }
});

只是不确定还能做什么才能使其正常工作？ 任何帮助将不胜感激。

更新***

所以我按照你说的做了，这是我的更改代码。除了现在我收到意外的令牌错误。

 var idleTime = 0;
   $(document).ready(function() {
     var limit = 7;
if ($.cookie('newVisit') !='1') {
    $.get('/pop_form.htm', function(data) {
        $('.subs-popup').html(data);
    });
    function timerIncrement() {
    idleTime++;
    if (idleTime > limit) {
        $('.subs-popup ').show();
        idleTime = 0;
    }
   }
    var idleInterval = setInterval(timerIncrement, 1000); // 1 second
    $(this).mousemove(function (e) {
        idleTime = 0;
    });
    $(this).keypress(function (e) {
        idleTime = 0;
    });
    $.cookie('newVisit', '1', { expires: 364 , path: "/" });
}
});  <----- this is where i get the unexpected token error

这是一个替代解决方案：

var timeout = null;
function resetTimer() {
  clearTimeout(timeout)
  timeout = setTimeout(function() {
                           clearTimeout(timeout)
                           alert("Idle!")
            }, 5000);
}
$(document).mousemove(function(e) {
    resetTimer();
});
$(document).keypress(function(e) {
    resetTimer()
});

这使用来自 setTimeout() 的返回值，该值是对超时的引用。 您可以使用此引用调用clearTimeout()，它将取消/清除/删除超时，因此您可以在每次鼠标移动/按下键时启动一个新的超时 - 而不是记录它被击中的次数。

小提琴：https://jsfiddle.net/2ewzr4sx/

对

我有用。减少测试用例：

var idleTime = 0;
$(document).ready(function() {
    var limit = 5;
	function timerIncrement() {
		idleTime++;
		if (idleTime > limit) {
			alert('Idle!');
			idleTime = 0;
		}
	}
	var idleInterval = setInterval(timerIncrement, 1000); // 1 second
	$(this).mousemove(function(e) {
		idleTime = 0;
	});
	$(this).keypress(function(e) {
		idleTime = 0;
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

附注：

  • 确保使用 var 声明所有变量。
  • 你也不应该让你的变量以$开头，如果它们没有jQuery-Object（例如 $limit应该limit）
  • 请注意，触摸设备用户不会移动任何鼠标，因此每次都处于"空闲"状态。
  • 请注意，使用 setInterval() ist 设置的间隔不能保证在这个时间执行。 例如，当选项卡在后台时具有限制间隔的浏览器。

第一次运行后，您不会看到任何弹出窗口，这是因为setInterval()的范围，当它第二次运行时，它在窗口范围内运行函数，您可以通过以下方式看到

function timerIncrement() {
  console.log('scope is:', this);
  idleTime++;
  /* rest your function code goes here... */

因此，为了防止它，您必须在全局范围内定义timerIncrement()，以便setInterval可以访问和调用它; :)

更新的代码：

function timerIncrement() {
  idleTime++;
  if (idleTime > $limit) {
    $('.subs-popup ').show();
      idleTime = 0;
  }
}
var idleTime = 0;
var idleInterval = 0;
var $limit = 5;
$(document).ready(function() {
  if ($.cookie('newVisit') != '1') {
    $.get('/pop_form.htm', function(data) {
        $('.subs-popup').html(data);
    });
    idleInterval = setInterval(timerIncrement, 1000); // 1 second
    $(this).mousemove(function(e) {
        idleTime = 0;
    });
    $(this).keypress(function(e) {
        idleTime = 0;
    });
    $.cookie('newVisit', '1', {
        expires: 364,
        path: "/"
    });
  } 
});
相关文章：