JS 函数的执行时机

普通函数的执行时机

函数在定义时不会执行,只要在调用函数时,其调用的变量已经存在就可以打印出变量值。

let a = 1;
function fn(){
	console.log(a)
}

下面的代码,打印结果是6个6,为什么?

let i = 0
for(i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}

原因:setTimeout表示先放下内部的代码,暂时不执行,等其部分执行完毕后才执行,是延迟执行。外面i走到6了,循环结束,setTimeout才执行。

写出让上面代码打印 0、1、2、3、4、5 的方法

for和let一起使用时,js会在每次循环时,多创建一个i,可以达到新人思维的输出效果。
代码:

for(let i = 0;i<6;i++){
	setTimeout(()=>{
    	console.log(i)
    },0)
}

还有一种办法,使用立即执行函数可以达到同样效果

let i = 0
for(i=0;i<6;i++){
	!function(j){
		setTimeout(()=>{
			console.log(j)
		},0)
	}(i)
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2的生命周期执行时机如下: 1. beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性。 2. created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板。 3. beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中。 4. mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示。 5. beforeUpdate:状态更新之前执行函数,此时 data 中的状态值是最新的,但是界面上显示的数据还是旧的,因为此时还没有开始重新渲染 DOM 节点。 6. updated:实例更新完毕之后调用此函数,此时 data 中的状态值和界面上显示的数据都已经完成了更新。 7. beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。 8. destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 下面是一个示例代码,演示了Vue2的生命周期执行时机: ```html <!DOCTYPE html> <html> <head> <title>Vue2生命周期执行时机</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Hello, Vue2!' }, beforeCreate: function() { console.log('beforeCreate'); }, created: function() { console.log('created'); }, beforeMount: function() { console.log('beforeMount'); }, mounted: function() { console.log('mounted'); }, beforeUpdate: function() { console.log('beforeUpdate'); }, updated: function() { console.log('updated'); }, beforeDestroy: function() { console.log('beforeDestroy'); }, destroyed: function() { console.log('destroyed'); } }); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值