JavaScript-setinterval延迟一秒怎么解决

简介: JavaScript-setinterval延迟一秒怎么解决

当使用setinterval时,发现它刚打开页面时会延迟一秒过后在执行。因为setinterval定时器先执行了自己的一秒钟,执行过后在对里面的内容进行操作,这样就会导致不能立即显示出来

举个例子:先创建一个div盒子,然后写script代码

var div = document.querySelector('div');
    var num = 10;
    setInterval(function(){
    if(num==1){
      div.innerHTML = null;
      return fn1;
    }else{
      num--;
      div.innerHTML = '还剩'+num+'秒';
    }
    },1000);

效果如图:

20210912095305346.gif

它的会先执行那一秒钟,等一秒钟过了然后再执行里面显示的内容

解决办法:

直接调用

var div = document.querySelector('div');
    var num = 11;
    function fn1(){
    if(num==1){
      div.innerHTML = null;
      return fn1;
    }else{
      num--;
      div.innerHTML = '还剩'+num+'秒';
    }
    }
    setInterval(fn1,1000);
    fn1();

20210912095719513.gif

相关文章
|
3月前
|
存储 JavaScript 前端开发
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
|
7月前
|
前端开发 JavaScript
Node.js 事件循环:定时任务、延迟任务和 I/O 事件的艺术
Node.js 事件循环:定时任务、延迟任务和 I/O 事件的艺术
Node.js 事件循环:定时任务、延迟任务和 I/O 事件的艺术
Fullpage.js添加滚动延迟
Fullpage.js添加滚动延迟
143 0
|
JavaScript 前端开发
js中实现ajax请求轮询,以及避免第一次延迟
js中实现ajax请求轮询,以及避免第一次延迟
539 0
|
Web App开发 JavaScript 前端开发
Vue.js - 移动端Click事件300毫秒延迟解决方案(fastClick.js)
Vue.js - 移动端Click事件300毫秒延迟解决方案(fastClick.js)
564 0
|
JavaScript 前端开发
【JavaScript】延迟刷新当前页面
【JavaScript】延迟刷新当前页面
132 0
|
存储 JavaScript 前端开发
JavaScript 技巧篇-js增加延迟时间解决单击双击事件冲突,双击事件触发单击事件
JavaScript 技巧篇-js增加延迟时间解决单击双击事件冲突,双击事件触发单击事件
814 0
|
Web App开发 JavaScript 前端开发
【翻译】V8 JavaScript 引擎之延迟反序列化
原文链接 Lazy deserialization 延迟反序列化(Lazy deserialization) 延迟反序列化(Lazy deserialization)功能在 V8 6.4 中默认打开了,带来的好处就是平均每个 Chrome 的选项卡可以节约500KB左右的内存消耗。
2356 0
|
28天前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
25 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
103 2