如何防止setInterval函数在Javascript中执行两次？
[英]How to prevent setInterval function from executing twice in Javascript?
问题描述
我正在进行JS Ajax调用，每2秒更新一次页面的内容。 为此，我正在使用setInterval方法。 我注意到我的setInterval方法执行了两次，结果得到重复的输出。 检查图像以供参考。
我的Flask后端routes.py
@app.route('/image/<im>')
@login_required
def image(im):
image_src=[im+'/'+i for i in os.listdir(os.path.join(app.static_folder,im))]
rows=math.ceil(len(image_src)/3)
print(image_src)
return render_template('dashboard.html',title='Welcome',images=image_src,rows=rows,image_date=im)
我的HTML dashboard.html
{% extends "base.html" %}
{% block content %}
<div class="image-area">
<div class="container dash-container main-body" >
<hr>
<div class="row">
<br>
<hr >
<br>
<div class="col-md-12">
<div class="jumbotron ">
<h1 id="hdr">DASHBOARD</h1>
</div>
</div>
</div>
{% if images %}
<div class="row" id="info">
<a href="{{ url_for('dashboard') }}"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></a>
</div>
<br><br>
<div class="row">
<div class="col-md-12" id="info">
{% set ns = namespace(counter=0) %}
<table class="table table-hover table-condensed table-bordered images-table" cellspacing="5" cellpadding="5">
{% for row in range(rows) %}
<tr class="image-hover">
{% for data in range(3) %}
{% if ns.counter < images|length %}
<td style="width:10%;">
<a href="{{ url_for('display',file=images[ns.counter][10:],folder=images[ns.counter][0:10]) }}"><img src="{{ url_for('static',filename=images[ns.counter]) }}" alt="User Image" width="200" height="180"></a>
<br>
{% set ns.counter = ns.counter + 1 %}
</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</table>
</div>
</div>
{% endif %}
</div>
</div>
<script type="text/javascript">
var first_time = 0;
var current_count = 0;
var total_count = 0;
function update(){
if (window.first_time == 0){
window.current_count = $('td').length;
window.total_count = window.current_count;
window.first_time = 1;
//var txt = $("<p class='notify'></p>").text("No new images");
$('body').append("<p class='notify'>No new images</p>");
}
else {
window.total_count = $('td').length;
if (window.total_count>window.current_count){
$('.notify').text(window.total_count-window.current_count + " images added !");
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
//window.alert(total_count-current_count + ' images added !');
window.current_count = window.total_count;
}
}
}
setInterval(function(){ $('.image-area').load("{{ url_for('image',im=image_date) }}"); update(); }, 2000);
</script>
{% endblock %}
base.HTML
<!DOCTYPE html>
<html>
<head>
{{ moment.include_jquery() }}
{{ moment.include_moment() }}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/base.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/about.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/index.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/dashboard.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/display.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/feedback.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/login.css') }}">
<link href="https://fonts.googleapis.com/css?family=Saira" rel="stylesheet">
{% if title %}
<title>{{ title }}</title>
{% else %}
<title>Welcome_segregator</title>
{% endif %}
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-custom">
<div class="container" >
<div class="navbar-header">
{% if current_user.username %}
<a class="navbar-brand nav-custom" href="{{ url_for('index') }}" ><span id="header"><span id="logo"><strong>Welcome </strong></span id="header"><strong>{{ current_user.username|striptags }} !</strong></span></a>
{% else %}
<a class="navbar-brand nav-custom" href="{{ url_for('index') }}"><span id="header"><span id="logo"><strong>Welcome </strong></span></span></a>
{% endif %}
</div>
<ul class="nav navbar-nav navbar-right " >
<li class="nav-custom"><a class="nav navbar-nav" href="{{ url_for('index') }}"><span class="glyphicon glyphicon-home "> <span id="header"><strong>Home</strong></span></a></li>
<li><a class="nav navbar-nav" href="{{ url_for('dashboard') }}"><span class="glyphicon glyphicon-dashboard"> <span id="header"><strong>Dashboard</strong></span></a></li>
<li><a class="nav navbar-nav" href="{{ url_for('about') }}"><span class="glyphicon glyphicon-user"> <span id="header"><strong>About Us</strong></span></a></li>
<li><a class="nav navbar-nav" href="{{ url_for('feedback') }}"><span class="glyphicon glyphicon-pencil"> <span id="header"><strong>Feedback</strong></span></a></li>
{% if current_user.is_anonymous %}
<li><a class="nav navbar-nav" href="{{ url_for('login') }}"><span class="glyphicon glyphicon-log-in"> <span id="header"><strong>Login</strong></span></a></li>
{% else %}
<li><a class="nav navbar-nav" href="{{ url_for('logout') }}"><span class="glyphicon glyphicon-off"> <span id="header"><strong>Logout</strong></span></a></li>
{% endif %}
</ul>
</div>
</nav>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</body>
</html>
setInterval方法每2秒更新一次页面，然后调用update()函数。 update函数在HTML文件的末尾实现自定义通知，该通知会通知用户是否有任何新项目。 如您在图像1和2中所看到的，该通知在页面上发送了两次。
重要说明：-不会立即添加重复的值。 对于没有新图像的情况，消息“没有新图像”会在2秒后添加，即，显示重复的“没有新图像”之间会有2秒的间隔。 但是，当有新图像时，不是在2秒钟后到达副本，而是在同一时间添加它们。 即消息“已添加5张图像”及其重复版本会同时到达屏幕。
请注意，重复消息已在底部更新。
请注意底部的重复项。 在这里，向仪表板添加了5张新图像，因此通知为5，这是正确的，但是显示重复。
我希望通知仅显示一次。 请帮忙。
编辑1： -这是完整的呈现的HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script>
moment.locale("en");
function flask_moment_render(elem) {
$(elem).text(eval('moment("' + $(elem).data('timestamp') + '").' + $(elem).data('format') + ';'));
$(elem).removeClass('flask-moment').show();
}
function flask_moment_render_all() {
$('.flask-moment').each(function() {
flask_moment_render(this);
if ($(this).data('refresh')) {
(function(elem, interval) { setInterval(function() { flask_moment_render(elem) }, interval); })(this, $(this).data('refresh'));
}
})
}
$(document).ready(function() {
flask_moment_render_all();
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="/static/styles/base.css">
<link rel="stylesheet" type="text/css" href="/static/styles/about.css">
<link rel="stylesheet" type="text/css" href="/static/styles/index.css">
<link rel="stylesheet" type="text/css" href="/static/styles/dashboard.css">
<link rel="stylesheet" type="text/css" href="/static/styles/display.css">
<link rel="stylesheet" type="text/css" href="/static/styles/feedback.css">
<link rel="stylesheet" type="text/css" href="/static/styles/login.css">
<link href="https://fonts.googleapis.com/css?family=Saira" rel="stylesheet">
<title>Welcome</title>
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-custom">
<div class="container" >
<div class="navbar-header">
<a class="navbar-brand nav-custom" href="/index" ><span id="header"><span id="logo"><strong>Welcome </strong></span id="header"><strong>dev !</strong></span></a>
</div>
<ul class="nav navbar-nav navbar-right " >
<li class="nav-custom"><a class="nav navbar-nav" href="/index"><span class="glyphicon glyphicon-home "> <span id="header"><strong>Home</strong></span></a></li>
<li><a class="nav navbar-nav" href="/dashboard"><span class="glyphicon glyphicon-dashboard"> <span id="header"><strong>Dashboard</strong></span></a></li>
<li><a class="nav navbar-nav" href="/about"><span class="glyphicon glyphicon-user"> <span id="header"><strong>About Us</strong></span></a></li>
<li><a class="nav navbar-nav" href="/feedback"><span class="glyphicon glyphicon-pencil"> <span id="header"><strong>Feedback</strong></span></a></li>
<li><a class="nav navbar-nav" href="/logout"><span class="glyphicon glyphicon-off"> <span id="header"><strong>Logout</strong></span></a></li>
</ul>
</div>
</nav>
<div class="image-area">
<div class="container dash-container main-body" >
<hr>
<div class="row">
<br>
<hr >
<br>
<div class="col-md-12">
<div class="jumbotron ">
<h1 id="hdr">DASHBOARD</h1>
</div>
</div>
</div>
<div class="row" id="info">
<a href="/dashboard"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></a>
</div>
<br><br>
<div class="row">
<div class="col-md-12" id="info">
<table class="table table-hover table-condensed table-bordered images-table" cellspacing="5" cellpadding="5">
<tr class="image-hover">
<td style="width:10%;">
<a href="/display?folder=07-05-2018&file=%2F07-05-18_02-18-39+PM_0.9997674822807312_0.0002324927772860974_bio_.jpeg"><img src="/static/07-05-2018/07-05-18_02-18-39%20PM_0.9997674822807312_0.0002324927772860974_bio_.jpeg" alt="User Image" width="200" height="180"></a>
<br>
</td>
<td style="width:10%;">
<a href="/display?folder=07-05-2018&file=%2F07-05-18_02-19-26+PM_0.0011277222074568272_0.9988722205162048_nonbio_.jpeg"><img src="/static/07-05-2018/07-05-18_02-19-26%20PM_0.0011277222074568272_0.9988722205162048_nonbio_.jpeg" alt="User Image" width="200" height="180"></a>
<br>
</td>
<td style="width:10%;">
<a href="/display?folder=07-05-2018&file=%2F07-05-18_02-19-47+PM_0.9632670283317566_0.03673300892114639_bio_.jpeg"><img src="/static/07-05-2018/07-05-18_02-19-47%20PM_0.9632670283317566_0.03673300892114639_bio_.jpeg" alt="User Image" width="200" height="180"></a>
<br>
</td>
</tr>
<tr class="image-hover">
<td style="width:10%;">
<a href="/display?folder=07-05-2018&file=%2F07-05-18_02-20-31+PM_0.7819413542747498_0.21805864572525024_bio_.jpeg"><img src="/static/07-05-2018/07-05-18_02-20-31%20PM_0.7819413542747498_0.21805864572525024_bio_.jpeg" alt="User Image" width="200" height="180"></a>
<br>
</td>
<td style="width:10%;">
<a href="/display?folder=07-05-2018&file=%2F07-05-18_02-20-53+PM_0.03425532579421997_0.96574467420578_nonbio_.jpeg"><img src="/static/07-05-2018/07-05-18_02-20-53%20PM_0.03425532579421997_0.96574467420578_nonbio_.jpeg" alt="User Image" width="200" height="180"></a>
<br>
</td>
<td style="width:10%;">
<a href="/display?folder=07-05-2018&file=%2F07-05-18_02-23-59+PM_6.910012757543882e-07_0.9999992847442627_nonbio_.jpeg"><img src="/static/07-05-2018/07-05-18_02-23-59%20PM_6.910012757543882e-07_0.9999992847442627_nonbio_.jpeg" alt="User Image" width="200" height="180"></a>
<br>
</td>
</tr>
<tr class="image-hover">
<td style="width:10%;">
<a href="/display?folder=07-05-2018&file=%2F07-05-18_02-24-21+PM_0.0027463394217193127_0.9972537159919739_nonbio_.jpeg"><img src="/static/07-05-2018/07-05-18_02-24-21%20PM_0.0027463394217193127_0.9972537159919739_nonbio_.jpeg" alt="User Image" width="200" height="180"></a>
<br>
</td>
<td style="width:10%;">
<a href="/display?folder=07-05-2018&file=%2F07-05-18_03-27-32+PM_0.8725430369377136_0.1274568885564804_bio_.jpeg"><img src="/static/07-05-2018/07-05-18_03-27-32%20PM_0.8725430369377136_0.1274568885564804_bio_.jpeg" alt="User Image" width="200" height="180"></a>
<br>
</td>
<td style="width:10%;">
<a href="/display?folder=07-05-2018&file=%2F07-05-18_04-23-40+PM_0.9983899593353271_0.0016100991051644087_bio_.jpeg"><img src="/static/07-05-2018/07-05-18_04-23-40%20PM_0.9983899593353271_0.0016100991051644087_bio_.jpeg" alt="User Image" width="200" height="180"></a>
<br>
</td>
</tr>
<tr class="image-hover">
<td style="width:10%;">
<a href="/display?folder=07-05-2018&file=%2F07-05-18_04-24-43+PM_0.014673426747322083_0.9853265285491943_nonbio_.jpeg"><img src="/static/07-05-2018/07-05-18_04-24-43%20PM_0.014673426747322083_0.9853265285491943_nonbio_.jpeg" alt="User Image" width="200" height="180"></a>
<br>
</td>
<td style="width:10%;">
<a href="/display?folder=07-05-2018&file=%2F07-05-18_04-25-37+PM_0.028937892988324165_0.9710620641708374_nonbio_.jpeg"><img src="/static/07-05-2018/07-05-18_04-25-37%20PM_0.028937892988324165_0.9710620641708374_nonbio_.jpeg" alt="User Image" width="200" height="180"></a>
<br>
</td>
<td style="width:10%;">
<a href="/display?folder=07-05-2018&file=%2F07-05-18_04-26-08+PM_0.10836496949195862_0.8916350603103638_nonbio_.jpeg"><img src="/static/07-05-2018/07-05-18_04-26-08%20PM_0.10836496949195862_0.8916350603103638_nonbio_.jpeg" alt="User Image" width="200" height="180"></a>
<br>
</td>
</tr>
<tr class="image-hover">
<td style="width:10%;">
<a href="/display?folder=07-05-2018&file=%2F07-05-18_04-26-56+PM_0.9980469942092896_0.0019529901910573244_bio_.jpeg"><img src="/static/07-05-2018/07-05-18_04-26-56%20PM_0.9980469942092896_0.0019529901910573244_bio_.jpeg" alt="User Image" width="200" height="180"></a>
<br>
</td>
<td style="width:10%;">
<a href="/display?folder=07-05-2018&file=%2F07-05-18_04-27-32+PM_0.0008696855511516333_0.9991303086280823_nonbio_.jpeg"><img src="/static/07-05-2018/07-05-18_04-27-32%20PM_0.0008696855511516333_0.9991303086280823_nonbio_.jpeg" alt="User Image" width="200" height="180"></a>
<br>
</td>
<td style="width:10%;">
<a href="/display?folder=07-05-2018&file=%2F07-05-18_04-28-29+PM_0.9541159868240356_0.04588397219777107_bio_.jpeg"><img src="/static/07-05-2018/07-05-18_04-28-29%20PM_0.9541159868240356_0.04588397219777107_bio_.jpeg" alt="User Image" width="200" height="180"></a>
<br>
</td>
</tr>
<tr class="image-hover">
<td style="width:10%;">
<a href="/display?folder=07-05-2018&file=%2F07-05-18_04-29-03+PM_0.0024711675941944122_0.9975288510322571_nonbio_.jpeg"><img src="/static/07-05-2018/07-05-18_04-29-03%20PM_0.0024711675941944122_0.9975288510322571_nonbio_.jpeg" alt="User Image" width="200" height="180"></a>
<br>
</td>
<td style="width:10%;">
<a href="/display?folder=07-05-2018&file=%2F07-05-18_04-29-25+PM_0.033340130001306534_0.9666599035263062_nonbio_+-+Copy+-+Copy+-+Copy+-+Copy+-+Copy+%282%29+-+Copy+-+Copy+-+Copy+-+Copy+-+Copy.jpeg"><img src="/static/07-05-2018/07-05-18_04-29-25%20PM_0.033340130001306534_0.9666599035263062_nonbio_%20-%20Copy%20-%20Copy%20-%20Copy%20-%20Copy%20-%20Copy%20%282%29%20-%20Copy%20-%20Copy%20-%20Copy%20-%20Copy%20-%20Copy.jpeg" alt="User Image" width="200" height="180"></a>
<br>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var first_time = 0;
var current_count = 0;
var total_count = 0;
function update(){
if (window.first_time == 0){
window.current_count = $('td').length;
window.total_count = window.current_count;
window.first_time = 1;
//var txt = $("<p class='notify'></p>").text("No new images");
$('body').append("<p class='notify'>No new images</p>");
}
else {
window.total_count = $('td').length;
if (window.total_count>window.current_count){
$('.notify').text(window.total_count-window.current_count + " images added !");
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
//window.alert(total_count-current_count + ' images added !');
window.current_count = window.total_count;
}
}
}
setInterval(function(){ $('.image-area').load("/image/07-05-2018"); update(); }, 2000);
</script>
</body>
</html>
3 个解决方案
解决方案1
2 2018-05-11 06:40:58
将您设置的间隔函数放入变量中，然后将该变量简单地传递给clearInterval（）函数，间隔函数仅执行一次
var myVar = setInterval(function(){ myTimer() }, 2000);
function myTimer() {
$('.image-area').load("{{ url_for('image',im=image_date) }}");
update();
}
setInterval(function(){
clearInterval(myVar);
}, 2000);
解决方案2
2 已采纳 2018-05-11 07:20:25
我检查了您的JavaScript，发现您使用的是不存在的全局窗口变量，而不是您预定义的局部变量。
首先，我认为您应该使用定义的局部变量。
var first_time = 0;
var current_count = 0;
var total_count = 0;
function update(){
if (first_time === 0){
current_count = $('td').length;
total_count = current_count;
first_time = 1;
//var txt = $("<p class='notify'></p>").text("No new images");
$('body').append("<p class='notify'>No new images</p>");
}
else {
total_count = $('td').length;
if (total_count>current_count){
$('.notify').text(total_count-current_count + " images added !");
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
//alert(total_count-current_count + ' images added !');
current_count = total_count;
}
}
}
我希望这有帮助。
我希望您在图像加载结束时尝试使用回调函数，因为它可能会两次调用update函数，因为图像加载可能需要2秒钟以上的时间来加载其资源，从而导致setInterval赶上它。
setInterval(function(){
$('.image-area').load("{{ url_for('image',im=image_date) }}", function() {
update();
});
}, 2000);
解决方案3
0 2018-05-11 07:31:57
var myVar = setInterval(function(){ myTimer() }, 2000);
function myTimer() {
$('.image-area').load("{{ url_for('image',im=image_date) }}");
update();
}
setInterval(function(){
clearInterval(myVar);
}, 2000);
尝试这个 ：）
防止同一触发函数执行两次的最佳方法是什么？
[英]What is the best way to prevent the same trigger function from executing twice?
JavaScript：阻止 setInterval Function 运行直到单击按钮
[英]JavaScript: Prevent setInterval Function From Running Until Button is Clicked
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.