Javascript/jQuery setInterval显示旧值onclick重新调用函数

Question

我正在使用setInterval函数来替换文本。

function loadData(set){
if(set == undefined){
var a = "Hello";
}
else{
var a = set;
}
setMe(a);
function setMe(val){
setInterval(function(){
$(".setMe").html(val);
}, 1000);
}
}
loadData();
$('#clickMe').on('click', function(){
loadData("Good");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="setMe"></div>
<button id="clickMe">Click Me</button>

当我尝试点击按钮时，它会将文本更改为Good。但是为什么旧文本仍然显示与Hello交替?你可以在演示版上试试。

我想要的是将文本仅替换为Good。

Answer 1

您正在调用loadData，它开始第一个间隔设置文本为"Hello"然后当你点击按钮时，它会开始另一个间隔设置文本为"好"。问题是，你现在有两个间隔设置文本值。时间间隔将永远保持运行。

你需要的是使用setInterval代替，它只会延迟文本值的更改，而不是反复更改。

function loadData(set){
if(set == undefined){
var a = "Hello";
}
else{
var a = set;
}
setMe(a);
function setMe(val){
setTimeout(function(){
$(".setMe").html(val);
}, 1000);
}
}
loadData();
$('#clickMe').on('click', function(){
loadData("Good");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="setMe"></div>
<button id="clickMe">Click Me</button>

Answer 2

setInterval用于定期间隔重复运行函数，除非清除。

发生了什么事:你调用你的函数两次，因此两个间隔运行。一个设置值为Hello，另一个设置值为Good。

你可以用setTimeout来代替它，它会在延迟后运行一个函数一次。

function loadData(set){
if(set == undefined){
var a = "Hello";
}
else{
var a = set;
}
setMe(a);
function setMe(val){
setTimeout(function(){
$(".setMe").html(val);
}, 1000);
}
}
loadData();
$('#clickMe').on('click', function(){
loadData("Good");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="setMe"></div>
<button id="clickMe">Click Me</button>

Answer 3

您需要更改变量a的声明位置而且setInterval在这里是不必要的，因为你只想触发你的动作一次(setInterval是重复的)。

function loadData(set){
var a;
if(set == undefined){
a = "Hello";
}
else{
a = set;
}

function setMe(val){
setTimeout(function(){
$(".setMe").html(val);
}, 1000);
}

setMe(a);
}
loadData();
$('#clickMe').on('click', function(){
loadData("Good");
});