Blogger Information
Blog 77
fans 0
comment 2
visits 55677
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS 函数的执行时机
南瓜又个梦
Original
605 people have browsed it
  1. let i = 0
  2. for(i = 0; i<6; i++){
  3. setTimeout(()=>{
  4. console.log(i)
  5. },0)
  6. }

会打印出来6个6,原因是settimeout函数是等完成当前事件在打印,或者说等一会在打印,所以会打印出来6个6,总结就是调用的时机,settimeout调用console.log的时候i 已经变成6了
2 打印 0、1、2、3、4、5 的方法

  1. for(let i = 0; i<6; i++){
  2. setTimeout(()=>{
  3. console.log(i)
  4. },0)
  5. }

猜测原因:let不能重复声明同一变量,所以在新的一次循环开始时,当前的事件已经被完成所以打印出012345
3 其他打出1-6

  1. for(var i = 0;i<5;i++){
  2. (function(i){
  3. setTimeout(function(){
  4. console.log(i)
  5. },1000*i)
  6. })(i)
  7. }

调用时机,会决定变量的值,还要结合变量的作用域一起考虑。

1.用 闭包 让其输出 12345

  1. for (var i =1; i<=5;i++){
  2. (function (j) {
  3. setTimeout(function timer() {
  4. console.log(j)
  5. },j*1000);
  6. })(i);
  7. }
  8. //12345

2.利用setTimeout 的第三个参数

  1. for ( var i=1; i<=5; i++) {
  2. setTimeout( function timer(j) {
  3. console.log( j );
  4. }, i*1000, i);
  5. }

附 setTimeout第三个参数
setTimeout 第三以后的参数是作为第一个参数(function())的参数传进的

  1. demo1
  2. function aa(x,y){
  3. console.log(x+y)//4
  4. }
  5. setTimeout(aa,1000,1,3)
  6. demo2
  7. function aa(x,y,z){
  8. console.log(x+y+z)//9
  9. }
  10. setTimeout(aa,1000,1,3,5)
  11. demo3
  12. function aa(x,y,z,q){
  13. console.log(x+y+z+q)//16
  14. }
  15. setTimeout(aa,1000,1,3,5,7)
  16. demoN
  17. var doc=document.getElementById('div');
  18. setTimeout(function(){
  19. doc.style.color='red';
  20. },10000,setTimeout(function(){
  21. doc.style.color='black';
  22. },5000));

上面的结果是,div元素内的字体样式5秒后变黑,10秒后再变红。是不是很惊奇,因为第三个参数也是一个定时器,5后就会开启。和JQuery里面的animate()不同,animate里面回调是执行了前面之后再执行后面的。

3 使用let定义i (let是创建一个块级作用域)

  1. for ( let i=1; i<=5; i++) {
  2. setTimeout( function timer() {
  3. console.log( i );
  4. }, i*1000 );
  5. }
  6. { // 形成块级作用域
  7. let i = 0
  8. {
  9. let ii = i
  10. setTimeout( function timer() {
  11. console.log( ii );/*下面无论多少个i++ 都是0; 如果这里输出的是i 下面 有多个i++ 输出的值 就是几*/
  12. }, i*1000 );
  13. }
  14. i++
  15. {
  16. let ii = i
  17. }
  18. i++
  19. {
  20. let ii = i
  21. }
  22. i++
  23. {
  24. let ii = i
  25. }
  26. }
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post