js for里面setTimeout问题

工作中需要写一个延时弹窗,想到for里面setTimeout,结果发现并没有按照要求走,没有延时。

于是就写个简单的测试:

for(var k=1;k<=9;k++) {
    setTimeout(aa(k),1000);
    console.log(k);
}
 
function aa(k) {
    console.log('k:'+k);
}

发现压根就没有等待,网上说setTimeout是异步的。也就是说for都执行完了,setTimeout还在执行。但这里表现的是setTimeout里的方法执行了,但是没有延时。
改成setTimeout(aa(k),1000*k);还是存在这样的问题。

1、通过setInterval()来模拟:

var d = 1;
var timer = setInterval(function() {
    console.log(d);
    d++;
 
    if(d>9) clearInterval(timer);
},1000);

2、闭包来实现:

for (var j=1; j<=9; j++) {
    (function(j){
        setTimeout( function timer(){
            console.log( j );
        }, 1000 *j);
    })( j );
}

3、定义块变量来实现:

for (let i=1; i<=9; i++) {
    setTimeout( function timer(){
        console.log( i );
    }, 1000 *i);
}

留作下次参考。

时间: 2024-09-21 21:43:37

js for里面setTimeout问题的相关文章

浏览器长期运行无法响应(程序中使用了js 的方法setTimeOut(),持续运行两天以后浏览器长期运行无法响应)

问题描述 浏览器长期运行无法响应(程序中使用了js的方法setTimeOut(),持续运行两天以后浏览器长期运行无法响应) 解决方案 解决方案二:检查你的JS吧你也太强了吧持续运行两天!解决方案三:死循环吗-解决方案四:何苦呢解决方案五:强悍解决方案六:有什么方法能够解决这个问题吗,系统场景:bs结构系统需要长期持续运行进行数据监控(通过浏览器)采用了不间断地(每两秒一次)向数据库发出请求数据命令,返回数据并显示到页面现在采用的是ajax方法,利用js的setTimeOut()发送回调方法进行后

js超时调用setTimeout和间歇调用setInterval实例分析_javascript技巧

本文实例分析了js超时调用setTimeout和间歇调用setInterval的用法.分享给大家供大家参考.具体如下: 今天看了javascript高级程序设计(第三版)一书,发现说setTimeout比setInterval更好,觉得的确如此.平时都是用setInterval多点,现在还是转一下思路了.又学习到了.分析如下: setTimeout包含两个参数,第一个参数是要执行的代码,第二个参数是时间. 第一个参数可以是字符串也可以是函数,但是推荐使用函数而不是字符串. 使用字符串相当于eva

js计时器之setTimeOut和setInterval用法

从根本上来说,理解计时器如何工作很重要.通常情况下,计时器的行为并不直观,因为它在一个单独的线程中,让我们从三个函数的测试开始,对于每一个函数我们都有机会构建和控制计时器. JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function",time) 设置一个超时对象 setInterval("function",time) 设置一个超时对象

js中的setTimeout和clearTimeout的教程

在前端网页开发时,焦点图的存在随处可见.通常都是去下载已经封装好的jquery来实现需要的功能,有多少人能实际了解实际原理吗?通过自己对原生js的学习,今天对setTimeout()·和clearTimeout()的用法做个小小的总结: 1.setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法:setTimeout(code,millisec)其中code是要调用的函数后要执行的method或function,millisec指的是需等待的毫秒数 首先是自己写的一个事例,

Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)

最近在做项目时用到了定时执行的js方法,setInterval与setTimeout时间长了不用有些生疏了,所以自己总结了一下,记下来,以便以后使用. Document自带的方法: 循环执行:var timeid = window.setInterval("方法名或方法","延时");window.clearInterval(timeid); 定时执行:var tmid = window.setTimeout("方法名或方法", "延时

Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)_javascript技巧

Document自带的方法: 循环执行:var timeid = window.setInterval("方法名或方法","延时");window.clearInterval(timeid); 定时执行:var tmid = window.setTimeout("方法名或方法", "延时");window.clearTimeout(tmid); 举例说明: A.当要执行的方法中不需要参数时 复制代码 代码如下: <scr

js dom的setTimeout与setInterval不同浏览器兼容测试(1/2)

<html> <head> <title>setTimeout example</title> <script type="text/javascript教程"> function delayedAlert() {   timeoutID = window.setTimeout(slowAlert, 2000); } function slowAlert() {   alert("That was really sl

js 传递函数: JS中setInterval、setTimeout不能传递带参数的函数的解决办法

在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,这就需要想方法解决.一.采用字符串形式:--(缺陷)参数不能被周期性改变setInterval("foo(id)",1000);二.匿名函数包装 (推荐)window.setInterval(function()    {foo (id);    }, 1000);   这样就可以周期性执行foo(id)这个函数,而且把变量id传递进去:三.定义返回无参函数的

JS中setInterval、setTimeout不能传递带参数的函数的解决方案_javascript技巧

在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数, 这就需要想方法解决. 一.采用字符串形式:--(缺陷)参数不能被周期性改变 setInterval("foo(id)",1000); 二.匿名函数包装 (推荐) 复制代码 代码如下: window.setInterval(function() { foo (id); }, 1000); 这样就可以周期性执行foo(id)这个函数,而且把变量id传递进去: 三