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

相关文章
|
5天前
|
前端开发 JavaScript
Node.js 事件循环:定时任务、延迟任务和 I/O 事件的艺术
Node.js 事件循环:定时任务、延迟任务和 I/O 事件的艺术
Node.js 事件循环:定时任务、延迟任务和 I/O 事件的艺术
Fullpage.js添加滚动延迟
Fullpage.js添加滚动延迟
107 0
|
JavaScript 前端开发
js中实现ajax请求轮询,以及避免第一次延迟
js中实现ajax请求轮询,以及避免第一次延迟
465 0
|
Web App开发 JavaScript 前端开发
Vue.js - 移动端Click事件300毫秒延迟解决方案(fastClick.js)
Vue.js - 移动端Click事件300毫秒延迟解决方案(fastClick.js)
445 0
|
JavaScript 前端开发
【JavaScript】延迟刷新当前页面
【JavaScript】延迟刷新当前页面
107 0
|
存储 JavaScript 前端开发
JavaScript 技巧篇-js增加延迟时间解决单击双击事件冲突,双击事件触发单击事件
JavaScript 技巧篇-js增加延迟时间解决单击双击事件冲突,双击事件触发单击事件
760 0
|
Web App开发 JavaScript 前端开发
【翻译】V8 JavaScript 引擎之延迟反序列化
原文链接 Lazy deserialization 延迟反序列化(Lazy deserialization) 延迟反序列化(Lazy deserialization)功能在 V8 6.4 中默认打开了,带来的好处就是平均每个 Chrome 的选项卡可以节约500KB左右的内存消耗。
2317 0
|
1天前
|
存储 JavaScript 前端开发
从零开始学习Vue.js
Vue.js 是一种流行的前端框架,它使用简单,灵活且易于上手。如果你是一个前端开发者,并想要学习 Vue.js,本文将为您提供一个从零开始的指南。我们将探讨 Vue.js 的基础知识和常用功能,以及如何构建一个简单的 Vue.js 应用程序。
|
2天前
|
缓存 JavaScript 前端开发
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会
|
3天前
|
设计模式 存储 前端开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发