setTimeout传参 和 运行机制
1、setTimeout 传参数
setTimeout还允许添加更多的参数。它们将被传入推迟执行的函数(回调函数)

上面代码中,setTimeout共有4个参数。最后那两个参数,将在1000毫秒之后回调函数执行时,作为回调函数的参数。
2、setTimeout运行机制
setTimeout和setInterval的运行机制是,将指定的代码移出本次执行,等到下一轮Event Loop时,再检查是否到了指定时间。如果到了,就执行对应的代码;如果不到,就等到再下一轮Event Loop时重新判断。这意味着,setTimeout指定的代码,必须等到本次执行的所有代码都执行完,才会执行。
每一轮Event Loop时,都会将“任务队列”中需要执行的任务,一次执行完。setTimeout和setInterval都是把任务添加到“任务队列”的尾部。因 此,它们实际上要等到当前脚本的所有同步任务执行完,然后再等到本次Event Loop的“任务队列”的所有任务执行完,才会开始执行。由于前面的任务到底需要多少时间执行完,是不确定的,所以没有办法保证,setTimeout和 setInterval指定的任务,一定会按照预定时间执行。
setTimeout(func,0)含义
运行下面代,func1和func2谁会先执行?很明显func2先执行;

setTimeout的作用是将代码推迟到指定时间执行,如果指定时间为0,即setTimeout(f,0),那么会立刻执行吗?
答案是不会。因为setTimeout运行机制说过,必须要等到当前脚本的同步任务和“任务队列”中已有的事 件,全部处理完以后,才会执行setTimeout指定的任务。也就是说,setTimeout的真正作用是,在“任务队列”的现有事件的后面再添加一个 事件,规定在指定时间执行某段代码。setTimeout添加的事件,会在下一次Event Loop执行。
setTimeout(f,0)将第二个参数设为0,作用是让f在现有的任务(脚本的同步任务和“任务队列”中已有的事件)一结束就立刻执行。也就是说,setTimeout(f,0)的作用是,尽可能早地执行指定的任务。
setTimeout(f,0)应用
调整事件的发生顺序
setTimeout(f,0)有几个非常重要的用途。它的一大应用是,可以调整事件的发生顺序。比如,网页开发中,某个事件先发生在子元素,然后 冒泡到父元素,即子元素的事件回调函数,会早于父元素的事件回调函数触发。如果,我们先让父元素的事件回调函数先发生,就要用到 setTimeout(f, 0)。

上面代码在点击按钮后,先触发回调函数A,然后触发函数C。在函数A中,setTimeout将函数B推迟到下一轮Loop执行,这样就起到了,先触发父元素的回调函数C的目的了。
用户自定义的回调函数,通常在浏览器的默认动作之前触发。比如,用户在输入框输入文本,keypress事件会在浏览器接收文本之前触发。因此,下面的回调函数是达不到目的的。


上面代码想在用户输入文本后,立即将字符转为大写。但是实际上,它只能将上一个字符转为大写,因为浏览器此时还没接收到文本,所以this.value取不到最新输入的那个字符。只有用setTimeout改写,上面的代码才能发挥作用。
document.getElementById('my-ok').onkeypress = function() {
	    var self = this;
	    setTimeout(function() {
	        self.value = self.value.toUpperCase();
	    }, 0);
	}

上面代码将代码放入setTimeout之中,就能使得它在浏览器接收到文本之后触发;原来如此:这也就解释了缘何在使用backbone调用render之时,操纵dom是无效的了,因为当时连dom元素都还没获取到(为何没报错?这牵扯到另一个话题),自然等页面渲染完毕了也没见想要的结果了。

参考: https://blog.csdn.net/qq_42051213/article/details/81008018
setTimeout传参 和 运行机制的更多相关文章
- 兼容性js中setTimeout 传参“保值”方案
		
这里所谓“保值”,是指在setTimeout中指定的时间后,执行指定的方法所用到的“参数”值,跟执行setTimeout时该“参数”值一样.是不是有点懵?看如下例子: ================ ...
 - setTimeout传参
		
unction test(s) { alert(s); } window.setTimeout(function(){test('str');},1000); 这样就可以了...为什么是这样呢.因为s ...
 - js关于setTimeout传参
		
setTimeout函数有两个参数,都是必须的,一个是要执行的函数,一个是延时的时间 第一个参数: 要执行的函数,一般来说是可以执行的,但是这里遇到一个问题,就是如果变量是个数组的话, 如果数组为nu ...
 - setInterval/setTimeout传参方法
		
网上文章说有3种方法,对于我来说一种方法就够了: <script> var user_name='离间计' //定时器 异步运行 function hello(name){ alert(n ...
 - 拼团商品列表页 分析 js代码行位置对执行的影响和window.onload的原理 setTimeout传参
		
w TypeError : Cannot set property 'innerHTML' of nullTypeError : Cannot set property 'value' of null ...
 - js SetTimeout传参问题
		
今天写代码遇到这样一个问题,先上代码 <!--JS方法--> function textout(obj){ if(opac==60){opac=0;return;}; opac+=10; ...
 - setTimeout 传参
		
一般setTimeout中的参数为 setTimeout(f,time)但是如果我想要给f函数传入一个参数怎么办 setTimeout(f(arguments),time) 如果我这样写的话,那么ti ...
 - 如何通过setTimeout理解JS运行机制详解
		
setTimeout()函数:用来指定某个函数或某段代码在多少毫秒之后执行.它返回一个整数,表示定时器timer的编号,可以用来取消该定时器. 例子 ? 1 2 3 4 5 console.log(1 ...
 - js setTimeout运行机制
		
在开始之前先看个面试例子 为什么会是0 1 2 2,而不是 0 0 1 1 再来看个例子 输出结果是4个undefined,为何不是1,2,3,4? 这是为什么呢,这是因为setTimeout是异步的 ...
 
随机推荐
- php session序列化攻击面浅析
			
目录 0x00 首先,session_start()是什么? 0x01 初识php-session序列化机制 0x02 php_serialize引擎(反)序列化测试 0x03 当使用不同的引擎来处理 ...
 - Redux的中间件原理分析
			
redux的中间件对于使用过redux的各位都不会感到陌生,通过应用上我们需要的所有要应用在redux流程上的中间件,我们可以加强dispatch的功能.最近也有一些初学者同时和实习生在询问中间件有关 ...
 - SQL Server 查找统计信息的采样时间与采样比例
			
有时候我们会遇到,由于统计信息不准确导致优化器生成了一个错误的执行计划(或者这样表达:一个较差的执行计划),从而引起了系统性能问题.那么如果我们怀疑这个错误的执行计划是由于统计信息不准确引起的.那么我 ...
 - 处理安卓和ios当页面原生键盘弹出,输入框不显示
			
$('input').on('click', function () { var target = this; // 使用定时器是为了让输入框上滑时更加自然 setTimeout(function() ...
 - pycharm远程同步服务器代码,并设置权限
			
Pycharm开发工具链接至上面创建的虚拟环境链接 权限问题:此时上传还可能遇到权限问题,即使用的用户名没有权限在给定的目录下写入和修改文件. ubuntu权限管理:移动到指定目标上传文件夹的父文件夹 ...
 - ansible基础-优化
			
简介 当管理集群达到一定规模时,ansible达到性能瓶颈是难以避免的,此时我们可以通过一定手段提高ansible的执行效率和性能. 笔者虽未管理过超大规模服务器,但也通过查找资料和咨询大神了解了一些 ...
 - 单例模式的优化之路(java)
			
1.概述 最近在优化公司以前老项目的代码时,发现有些类的代码频繁地创建和销毁对象,资源消耗比较严重.针对这些做了一些优化,改用单例模式,避免频繁的创建和销毁对象,说起单例模式,相信每个人都会写,接下来 ...
 - Python后台开发Django(数据库)
			
如果使用pymysql,则可以在view中直接import pymysql进行操作,与原操作无区别 Django数据库框架支持 sqlite3, MySQL, PostgreSQL等数据库,只需要在s ...
 - 小乌龟git
			
一.概念 分布式版本控制系统.诞生于Linux社区,有兴趣可以去了解下git的前世今生. 与集中式版本控制有明显区别.集中式:集中管理的服务器,保存所有的修订版本,协同工作的人通过客户端连接服务器,取 ...
 - Vue.js-02:第二章 - 常见的指令的使用
			
一.前言 在上一章中,我们了解了一些在使用 Vue 进行开发中经常会遇到的基础概念,与传统的前端开发不同,Vue 可以使我们不必再使用 JavaScript 去操作 DOM 元素(还是可以用,但是极度 ...