setinterval 相关问题

我试图在这里解决一个简单的问题，但我不知道该采取什么方向。 getAuthNumber() // 返回带有数字的承诺（例如 98765） // 响应时间可以是5s-20s 我试图在这里解决一个简单的问题，但我不知道该采取什么方向。 getAuthNumber() // returns a promise with a number (eg 98765) // response times can be 5s-20s <div class=“auth”> </div> //code let counter = 0; let el = document.getElementsbyClassName(“auth”)[0]; let func = setInterval(function(){ counter++; getAuthNumber().then((num)=>{ return [num, counter]; }).then(res){ If(counter == res[1]) el.innerHTML = res[0]; }, 10000); 我需要编写一个函数，每 10 秒获取一次身份验证编号并将其显示在下面的块中。我尝试过使用设置间隔，但 getAuthNumber() 可能需要 10 秒以上才能返回，在这种情况下，我需要丢弃该响应并仅显示当前值。我已将 Jake Archibald 的 this gist（请参阅 JavaScript 对抗困难方法 - HTTP 203）改编为以下代码： function promiseInterval(milliseconds, signal, promiseFactory, callback) { const start = performance.now(); function tick(time) { if (signal.aborted){ return; } promiseFactory().then( value => { callback(value); scheduleTick(time); } ); } function scheduleTick(time) { const elapsed = time - start; const roundedElapsed = Math.round(elapsed / milliseconds) * milliseconds; const targetNext = start + roundedElapsed + milliseconds; const delay = targetNext - performance.now(); setTimeout(tick, delay); } scheduleTick(start); } 从要点开始，我删除了requestAnimationFrame和document.timeline.currentTime的使用（仅使用performance.now），并且添加了promiseFactory参数，加上一些重命名（animationInterval重命名为promiseInterval， ms 重命名为 milliseconds 和 scheduleFrame 重命名为 scheduleTick）并格式化。你可以像这样使用它： const controller = new AbortController(); // This is used to stop promiseInterval( 10000, // 10s controller.signal, // signal, to stop the process call `controller.abort` getAuthNumber, // the promise factory num => {el.innerHTML = num;} // this is what you do with the values ); 它不会真正每 10 秒调用一次 getAuthNumber。相反，它将等到 getAuthNumber 完成并安排在下一个 10 秒间隔调用，然后重复。所以它不会多次调用它并丢弃值。不要使用setInterval而是使用setTimeOut函数。 setInterval 的执行取决于 CPU 使用率，如果增加的话 setInterval 将无法在指定的时间间隔内完成您可以做的是在 async 内运行 setInterval 函数。在下面的代码片段中，getAuth函数在2秒后完成，但setInterval每1秒运行一次。但它仍然有效，因为async内部有一个setInterval功能。 const getAuth = () => { return new Promise((res, rej) => { setTimeout(() => res(Math.random()), 2000); }); }; const setDiv = async () => { const res = await getAuth(); console.log(res); }; setInterval(setDiv, 1000);

javascript angular setinterval real-time

回答 3 投票 0

setTimeout和setInterval返回的定时器ID是普通的、可伪造的数字，这是否存在安全问题？

好吧，这并不是什么巨大的安全风险，尽管它至少揭示了一些潜在的干扰。假设我们有那些非常封闭的 JavaScript 模块，它们在不知情的情况下加载到我的页面中......

javascript security setinterval

回答 2 投票 0

Javascript 循环等待来自外部源的输入（Android tasker）

我对 JavaScript 还很陌生。我在 JavaScript 中的等待循环中遇到了困难，无法等待来自外部源（任务执行器）的内容。特别是我有一个带有 JavaScript 的 HTML 文档（显示...

javascript loops settimeout setinterval tasker

回答 1 投票 0

为什么我的打字机效果中的 setInterval 会跳过第二个字符（索引 1）并正确显示剩余字符？

我正在我的 React 应用程序中实现打字机效果，其中我从 URL 获取字符串并一次显示一个字符。我希望效果从第一个字符（索引 0）和 p 开始......

javascript reactjs react-hooks setinterval

回答 2 投票 0

为什么我的 React 打字机效果中的 setInterval 会跳过第二个字符（索引 1）并正确显示剩余字符？

我正在我的 React 应用程序中实现打字机效果，其中我从 URL 获取字符串并一次显示一个字符。我希望效果从第一个字符（索引 0）和 p 开始......

reactjs setinterval

回答 1 投票 0

如何暂停 setInterval() 函数？

如何使用 Javascript 暂停和恢复 setInterval() 函数？例如，也许我有一个秒表可以告诉您您浏览网页的秒数。有一个‘

javascript setinterval

回答 11 投票 0

setInterval 相对于事件循环的行为

尝试找出为什么以下代码的输出是这样的 console.log("开始"); 设置间隔（函数（）{ console.log("setInterval"); }, 5000); 让日期=新日期（）；同时...

javascript setinterval event-loop

回答 1 投票 0

更新动态更改以获取数据

我现在陷入困境。我创建了一个函数来控制使用毫秒到秒、分钟和小时的计算来获取数据的频率，这似乎工作正常。这是...

javascript api dom event-handling setinterval

回答 1 投票 0

间隔函数会导致无限的 UI 负载，除非我在 URL 中输入“/index.html”

我正在尝试在我的 Angular 应用程序中制作一个简单的数字时钟，但目前我只是让它显示一个计数器，同时我弄清楚到底发生了什么：在clock.component.html中：我正在尝试在我的 Angular 应用程序中制作一个简单的数字时钟，但目前我只是让它显示一个计数器，同时我弄清楚到底发生了什么：在clock.component.html中： <div class="time" id="time">{{ secondsPassed }}</div> 在clock.component.ts中： @Component({ selector: 'app-clock', standalone: true, imports: [], templateUrl: './clock.component.html', styleUrl: './clock.component.scss' }) export class ClockComponent implements OnInit, OnDestroy { secondsPassed: number; timer: any; constructor() { this.secondsPassed = 0; } ngOnInit(): void { this.startTimer(); } ngOnDestroy(): void { if (this.timer) { clearInterval(this.timer); } } startTimer() { this.timer = setInterval(() => { this.secondsPassed++; console.log(this.secondsPassed); }, 1000) } } 每当我执行服务并继续 localhost:4200 时，它将永远卡在旋转的加载圈上，除非我手动输入 localhost:4200/index.html，此时它将正确显示计时器并更新。我尝试了很多不同的东西，包括 rxjs 订阅和异步管道，但没有任何效果。我什至尝试在 Angular 区域之外运行，但计时器不会更新。我注意到的一件非常奇怪的事情是，每当我保存对代码的更改并在 Angular 本地服务器运行时重建它时，它就会看起来好像有两个计时器在运行，所以我不确定 ngOnDestroy 是否被调用以及第一个还没清除？我对 Angular 还很陌生，所以我不知道这是否与我的问题有关。感谢您的帮助！出于某种原因，这个问题的答案有效。我不知道为什么，但至少它解决了我的问题:) 我也遇到了同样的问题，花了很长时间才找到解决方案。随着 Angular 17 中引入 SSR，页面的渲染发生在服务器上，从而产生包含初始页面状态的初始 HTML 内容。这会导致在计时器或间隔运行时渲染无法完成。这可以通过 afterNextRender 方法来解决，该方法必须在可注入上下文中调用，最好是在 constructor 中调用。 afterNextRender(() => { setInterval(() => { console.log('Interval triggered'); // Put your code here ngZone.run(() => { // Put your ui changes here }); }, 10000); }, {phase: AfterRenderPhase.Write}); UI 更改必须再次在 Angular 环境中进行。确保使用正确的RenderPhase。您问题的完整组成部分： import {afterNextRender, AfterRenderPhase, Component, NgZone, OnDestroy, OnInit} from "@angular/core"; @Component({ selector: 'app-clock', standalone: true, imports: [], templateUrl: './clock.component.html', styleUrl: './clock.component.scss' }) export class ClockComponent implements OnInit, OnDestroy { secondsPassed: number; timer: any; constructor(private ngZone: NgZone) { this.secondsPassed = 0; afterNextRender(() => { this.startTimer(); }, {phase: AfterRenderPhase.Write}); } ngOnInit(): void { //this.startTimer(); } ngOnDestroy(): void { if (this.timer) { clearInterval(this.timer); } } startTimer() { this.timer = setInterval(() => { this.ngZone.run(() => { this.secondsPassed++; }); console.log(this.secondsPassed); }, 1000) } }

html angular typescript setinterval angular17

回答 2 投票 0

语音气泡不会每 30 秒出现一次

我正在尝试创建一个每 30 秒出现在浮动按钮旁边的对话气泡。我已经添加了必要的 HTML、JavaScript 和 CSS 样式，但对话气泡并未像以前那样显示...

javascript html css setinterval

回答 1 投票 0

setinterval 相关问题

最新问题