如何解决在将新数组传递给同一函数后,我无法弄清楚如何停止对函数中的数组进行迭代
在我的应用中,我连接到新闻服务并拉回一系列文章;我每 20 分钟做一次。
在那 20 分钟内,我循环遍历我拉取的文章数组,每 15 秒从数组中读取一篇新文章。
我的问题是,20 分钟后,我从新闻服务中获取了一个新数组并开始循环遍历该数组。显然,我正在做一个双循环,原始数组加上新数组。
然后,又过了 20 分钟,我正在循环阅读另一组新闻文章……现在总共三篇。
这会持续一整天,直到变成一团糟。
我想知道如何在获得新数组后停止原始循环:
clearInterval(articleIntervalVar);
newsArticlesArray = null;
但我试过的都没有用,我无法弄清楚。
newsFunction();
newsIntervalVar = setInterval(newsFunction,1200000);
function newsFunction() {
xmlHttpNewsObject = GetXmlHttpObject();
if (xmlHttpNewsObject === null){
alert ("browser does not support HTTP Request");
return;
}
var url = "";
xmlHttpNewsObject.open("GET",url,true);
xmlHttpNewsObject.onreadystatechange = getTheNews;
xmlHttpNewsObject.send(null);
}
function getTheNews(){
if (xmlHttpNewsObject.readyState == 4 && xmlHttpNewsObject.status == 200){
var newsArticlesArray = JSON.parse(xmlHttpNewsObject.responseText).articles
drawTheNews(newsArticlesArray);
return;
}
}
function drawTheNews(newsArticlesArray) {
var news = document.getElementById('news');
var numberOfArticles = newsArticlesArray.length;
var i = 0;
news.innerHTML = newsArticlesArray[i].title);
var articleIntervalVar = setInterval(function () {
i++;
if (i === numberOfArticles) i = 0;
news.innerHTML = newsArticlesArray[i].title);
},15000);
}
解决方法
我会使用稍微不同的逻辑,在您获得要显示的文章列表时设置间隔,并在此之前清除所有现有间隔。
此外,我还清除了所有 20 世纪的 xmlHttp
文献,并用 fetch
:)
const url = "...";
const newsElem = document.getElementById('news'); // cache your element instead of accessing it every time
let articles = [];
let articleInterval = null;
const newsFunction = async() => {
try {
const response = await fetch(url)
articles = await response.json();
clearInterval(articleInterval); // Clear the existing interval here
articleInterval = setInterval(drawTheNews,15000); // Set the new interval
} catch (err) {
console.log("Error getting the news : ",err)
}
}
const drawTheNews = () => {
const article = articles.pop();
if (!article) {
console.log("Depleted all news!")
clearInterval(articleInterval)
return;
}
newsElem.innerHTML = article.title
}
newsFunction();
setInterval(newsFunction,1200000);
你只需要清除超时,将ref移动到全局作用域,每次清除它就可以去除旧作用域
var articleIntervalVar;
newsFunction();
newsIntervalVar = setInterval(newsFunction,1200000);
function newsFunction() {
xmlHttpNewsObject = GetXmlHttpObject();
if (xmlHttpNewsObject === null){
alert ("Browser does not support HTTP Request");
return;
}
var url = "";
xmlHttpNewsObject.open("GET",url,true);
xmlHttpNewsObject.onreadystatechange = getTheNews;
xmlHttpNewsObject.send(null);
}
function getTheNews(){
if (xmlHttpNewsObject.readyState == 4 && xmlHttpNewsObject.status == 200){
var newsArticlesArray = JSON.parse(xmlHttpNewsObject.responseText).articles
drawTheNews(newsArticlesArray);
return;
}
}
function drawTheNews(newsArticlesArray) {
var news = document.getElementById('news');
var numberOfArticles = newsArticlesArray.length;
var i = 0;
news.innerHTML = newsArticlesArray[i].title);
clearInterval(articleIntervalVar);
articleIntervalVar = setInterval(function () {
i++;
if (i === numberOfArticles) i = 0;
news.innerHTML = newsArticlesArray[i].title);
},15000);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。