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);

效果如图:

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

解决办法:

直接调用

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();

到此这篇关于JavaScript setinterval延迟一秒解决方案的文章就介绍到这了,更多相关JavaScript setinterval延迟一秒解决内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-09-12

解决js中的setInterval清空定时器不管用问题

使用场景:我在函数A中调用定时器函数,定时器是单独写的一个函数 原因:页面加载时我调用了1次函数A,然后又单独调用了一次定时器函数,导致调用了2次setInterval(),导致有setInterval_id有2个值. 通过打印定时器的值发现的问题. clearInterval()只关闭了其中一个setInterval_id,另一个setInterval_id还会启动setInterval(). 解决方法:把单独调用的定时器函数去掉. 补充知识:js vue中setTimeout无法通过clea

JS使用setInterval实现的简单计时器功能示例

本文实例讲述了JS使用setInterval实现的简单计时器功能.分享给大家供大家参考,具体如下: 使用setInterval实现计时,并且满60秒向分钟进一,满60分钟向小时进一. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS计时器</title> <script> window.onload =

JavaScript setInterval()与setTimeout()计时器

JavaScript是单线程语言,但是它可以通过设置超时值和间歇时间值来指定代码在特定的时刻执行.超时值是指在指定时间之后执行代码,间歇时间值是指每隔指定的时间就执行一次代码. 超时调用 超时调用使用window对象的setTimeout()方法,它接受两个参数:要执行的代码和以毫秒表示的时间(代码执行前的等待时间).其中,第一个参数可以是一个字符串(和eval()中使用的字符串一样),也可以是一个函数. 第二个参数是一个表示等待多长时间的毫秒数,但是在该时间过去后代码并不一定执行.JavaSc

JS SetInterval 代码实现页面轮询

概念介绍 setInterval 是一个实现定时调用的函数,可按照指定的周期(以毫秒计)来调用函数或计算表达式.setInterval方法会不停地调用函数,直到 clearInterval 被调用或窗口被关闭. 由 setInterval 返回的ID值可用作 clearInterval 方法的参数. 提示: 1000 毫秒= 1 秒. flash用法(来自百度百科) setInterval 动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数据库的变量或更新时

JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题

先看下面一段代码: DiGui = function (param) { $.ajax({ success: function (returnValue) { window.setInterval("fnSetMarkPoint()", 5000); } }); 调用DiGui()方法后 问题: 每隔0.1秒创建一个setInterval,成一个树形的方式循环创建setInterval,直到页面崩溃 解决思路: 保证setInterval对象只创建一次 实现方案: 定一个布尔变量进行判

JavaScript定时器setTimeout()和setInterval()详解

本文实例为大家分享了JavaScript定时器的具体方法,供大家参考,具体内容如下 1. 超时调用setTimeout() 顾名思义,超时调用的意思就是在一段实际之后调用(在执行代码之前要等待多少毫秒) setTimeout()他可以接收两个参数: 1.要执行的代码或函数 2.毫秒(在执行代码之前要等待多少毫秒) function test(){ alert("孙悟空"); } setTimeout(test,2000); //2s后弹出 "孙悟空" clearTi

JavaScript中SetInterval与setTimeout的用法详解

setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数

Javascript中setTimeOut和setInterval的定时器用法

Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等等.但它们的应用是有区别的. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除.也就是说setTimeout()只执行一次,setInterval()可以执行多次.两个函数

Javascript 实现计算器时间功能详解及实例(二)

Javascript 计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) Javascript计算器 -> 添加时间在屏显区左上角添加时间显示 效果图如下: 代码 初始化 // 计算器初始化 Calculator.prototype.init = function () { this.addTdClick(); // 时间显示 this.showDate(); }; 时间显示 // 在屏显区左上角显示时间日期 Calculator

Javascript之BOM(window对象)详解

ECMAScript是JavaScript的核心,但在web使用JavaScript,那么BOM(浏览器对象模型)才是真正的核心. BOM的核心对象是window,它表示浏览器的一个实例. 在浏览器中,window对象既是JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.也就是说,在网页中定义的任何一个变量.对象和函数以window作为其Global对象. 1.全局作用域 既然window对象扮演着Global对象,那么所有在全局作用域中声明的对象.变

BOM系列第一篇之定时器setTimeout和setInterval

setTimeout() setTimeout()方法用来指定某个函数或字符串在指定的毫秒数之后执行.它返回一个整数,表示定时器的编号,这个值可以传递给clearTimeout()用于取消这个函数的执行 以下代码中,控制台先输出0,大概过1000ms即1s后,输出定时器setTimeout()方法的返回值1 var Timer = setTimeout(function(){ console.log(Timer); },1000); console.log(0); 也可以写成字符串参数的形式,由

JavaScript编写棋盘覆盖代码详解

一.前言 之前做了一个算法作业,叫做棋盘覆盖,本来需要用c语言来编写的,但是因为我的c语言是半桶水(哈哈),所以索性就把网上的c语言写法改成JavaScript写法,并且把它的覆盖效果显示出来 二.关键代码 <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titl

javascript 正则表达式分组、断言详解

 javascript 正则表达式分组.断言详解 提示:阅读本文需要有一定的正则表达式基础. 正则表达式中的断言,作为高级应用出现,倒不是因为它有多难,而是概念比较抽象,不容易理解而已,今天就让小菜通俗的讲解一下. 如果不用断言,以往用过的那些表达式,仅仅能获取到有规律的字符串,而不能获取无规律的字符串. 举个例子,比如html源码中有<title>xxx</title>标签,用以前的知识,我们只能确定源码中的<title>和</title>是固定不变的.因

javascript中Array()数组函数详解

在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. Array()是一个用来构建数组的内建构造器函数.数组主要由如下三种创建方式: array = new Array() array =

玩转JavaScript OOP - 类的实现详解

概述 当我们在谈论面向对象编程时,我们在谈论什么? 我们首先谈论的是一些概念:对象.类.封装.继承.多态. 对象和类是面向对象的基础,封装.继承和多态是面向对象编程的三大特性. JavaScript提供了对象却缺乏类,它不能像C#一样能显式地定义一个类. 但是JavaScript的函数功能非常灵活,其中之一就是构造函数,结合构造函数和原型对象可以实现"类". 对象和类的概念 对象 "对象"是面向对象编程中非常重要的一个概念,一个对象是一个"东西"