settimeout

setTimeout()和setInterval()小结

ⅰ亾dé卋堺 提交于 2020-02-12 03:43:31
写在前面:在写H5游戏时经常需要使用定时刷新页面实现动画效果,比较常用即setTimeout()以及setInterval() setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串。 millisec 必需,在执行代码前需等待的毫秒数。 实现刷新 setTimeout()用于延时调用指定函数,可以通过在函数中递归调用自身,实现反复调用。 <!-- setTimeout递归调用实现计时器效果: --> <html> <head> <script type="text/javascript"> var t=0; function timer(){ document.getElementById("txt").value=t; t++; setTimeout("timer()",1000); } </script> </head> <body> <p>setTimeout实现计时器效果</p> <input type="text"id="txt"> <script> timer(); </script> </body>

setTimeout 和 setInterval区别及 对array数组的扩展

北慕城南 提交于 2020-02-11 23:06:19
一:setTimeout 和 setInterval区别 window对象有两个主要的定时方法,分别是setTimeout 和 setInteval 他们的语法基本上相同,但是完成的功能取有区别。   setTimeout方法是定时程序,也就是在什么时间以后干什么。干完了就拉倒。   setInterval方法则是表示间隔一定时间反复执行某操作。   如果用setTimeout实现setInerval的功能,就需要在执行的程序中再定时调用自己才行。如果要清除计数器需要 根据使用的方法不同,调用不同的清除方法: 例如:  tttt=setTimeout('northsnow()',1000);      clearTimeout(tttt); 或者:       tttt=setInterval('northsnow()',1000);       clearInteval(tttt); 二:可以对其进行扩展 如:     Function.prototype.delay = function(time) { var timer = setTimeout(this, time); } //函数延迟time毫秒执行      调用是 :check.delay(2000) 比如array没有contains,sort等,都可以写个扩展    Array.prototype.sorts =

js的单线程和异步

泄露秘密 提交于 2020-02-11 06:25:55
引用 :https://www.cnblogs.com/woodyblog/p/6061671.html 前言 说到js的单线程(single threaded)和异步(asynchronous),很多同学不禁会想,这不是自相矛盾么?其实,单线程和异步确实不能同时成为一个语言的特性。js选择了成为单线程的语言,所以它本身不可能是异步的,但js的宿主环境(比如浏览器,Node)是多线程的,宿主环境通过某种方式(事件驱动,下文会讲)使得js具备了异步的属性。往下看,你会发现js的机制是多么的简单高效! 说说浏览器 js是单线程语言,浏览器只分配给js一个主线程,用来执行任务(函数),但一次只能执行一个任务,这些任务形成一个任务队列排队等候执行,但前端的某些任务是非常耗时的,比如网络请求,定时器和事件监听,如果让他们和别的任务一样,都老老实实的排队等待执行的话,执行效率会非常的低,甚至导致页面的假死。所以,浏览器为这些耗时任务开辟了另外的线程,主要包括http请求线程,浏览器定时触发器,浏览器事件触发线程,这些任务是异步的。下图说明了浏览器的主要线程。 图片来自popAnt 画得太好,忍不住引过来 ( http://blog.csdn.net/kfanning/article/details/5768776 ) 再说说任务队列 刚才说到浏览器为网络请求这样的异步任务单独开了一个线程

js的单线程和异步

折月煮酒 提交于 2020-02-11 06:23:18
前言 说到js的单线程(single threaded)和异步(asynchronous),很多同学不禁会想,这不是自相矛盾么?其实,单线程和异步确实不能同时成为一个语言的特性。js选择了成为单线程的语言,所以它本身不可能是异步的,但js的宿主环境(比如浏览器,Node)是多线程的,宿主环境通过某种方式(事件驱动,下文会讲)使得js具备了异步的属性。往下看,你会发现js的机制是多么的简单高效! 说说浏览器 js是单线程语言,浏览器只分配给js一个主线程,用来执行任务(函数),但一次只能执行一个任务,这些任务形成一个任务队列排队等候执行,但前端的某些任务是非常耗时的,比如网络请求,定时器和事件监听,如果让他们和别的任务一样,都老老实实的排队等待执行的话,执行效率会非常的低,甚至导致页面的假死。所以,浏览器为这些耗时任务开辟了另外的线程,主要包括http请求线程,浏览器定时触发器,浏览器事件触发线程,这些任务是异步的。下图说明了浏览器的主要线程。 图片来自popAnt 画得太好,忍不住引过来 ( http://blog.csdn.net/kfanning/article/details/5768776 ) 再说说任务队列 刚才说到浏览器为网络请求这样的异步任务单独开了一个线程,那么问题来了,这些异步任务完成后,主线程怎么知道呢?答案就是回调函数,整个程序是事件驱动的

JS30紀錄 13-Slide in on Scroll

情到浓时终转凉″ 提交于 2020-02-10 01:02:38
隨著卷軸移動到中央,讓圖片動態顯示。 Demo | Github 處理步驟 步驟 1. 首先取得所有圖片 HTML ,並建立空的 Function checkSlide 與綁定 scroll 捲軸移動事件。 步驟 2. 因為 scroll 每次觸發頻率過高,所以呼叫 debounce 來降低呼叫頻率,避免效能損耗 針對所有圖片 HTML 進行 foreach 迴圈 取得目前畫面所在的高度 取得圖片所在的高度 步驟 3. 依照上一步驟取得的高度位置,進行判斷,然後添加 active class 筆記與備註事項 此練習有幾個要熟悉的要點: 熟悉畫面的位 大专栏 JS30紀錄 13-Slide in on Scroll 置,包含相對位置與絕對座標 另一是 debounce 這 Function 利用了 setTimeout 與 apply JavaScript 部分 window.clearTimeout 清除 setTimeout 設定。 Function.prototype.apply() CSS 部分 參考資料 JavaScript 30 day 作者 Github Wes Bos Js 30 day 中文指南 瓜瓜的 JS 30 我的 JS 30 練習Github 来源: https://www.cnblogs.com/liuzhongrong/p/12289522.html

window对象之计时器--v客学院技术分享

做~自己de王妃 提交于 2020-02-09 14:15:25
setTimeout()和setInterval()可以用来注册在指定的时间之后单次或者重复调用的函数。因为它们都是客户端JavaScript中重要的全局函数,所以定义为window对象的方法,但是作为通用函数,其实不会对窗口做什么事情。 Window对象的setTimeout()方法用来实现一个函数在指定的毫秒数之后运行。setTimeout()返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行。 setIntterval()和setTimeout()一样,只不过这个函数会在指定毫秒数的间隔里重复调用, 如 : setIntterval(updateClock,1000);//每一秒钟调用updateClock() 和 setTimeout()一样,setInterval()也返回一个值,这个值可以传递给clearInterval(),用于取消后续函数的调用。 下面演示下 setTimeout()、setInterval()和clearInterval()的用法: 由于历史原因,setTimeout()和setInterval()的第一个参数可以作为字符串传入。如果这么做,那这个字符串会在指定的超时时间或间隔之后进行求值(相当于执行eval())。 除前两个参数之外, HTML5规范还允许setTimeout()和setInterval(

How do I kill a setInterval()/setTimout() if I lose the calling object?

。_饼干妹妹 提交于 2020-02-08 03:09:44
问题 I'm working on a rather large app, I need to call a function over an over again while a key is being pressed, at a specific interval. There's parts of the app that I can't edit, but it's replacing my .onkeyup() listeners and sometimes the interval is just left there forever. What I really want is for the interval to stop when the object gets destroyed, reassigned, etc... After setInterval(), bindings, closures, I made this to try something out and now I am even more confused: function

js 异步执行顺序

柔情痞子 提交于 2020-02-07 01:07:43
1.js的执行顺序,先同步后异步 2.异步中任务队列的执行顺序: 先微任务microtask队列,再宏任务macrotask队列 3.调用Promise 中的resolve,reject属于微任务队列,setTimeout属于宏任务队列 注意以上都是 队列,先进先出。 微任务包括 `process.nextTick` ,`promise` ,`MutationObserver`。 宏任务包括 `script` , `setTimeout` ,`setInterval` ,`setImmediate` ,`I/O` ,`UI rendering`。 在node环境下,process.nextTick的优先级高于Promise,也就是可以简单理解为:在宏任务结束后会先执行微任务队列中的nextTickQueue部分,然后才会执行微任务中的Promise部分。 javascript事件机制 题目1: console.log('script start') async function async1() { await async2() console.log('async1 end') } async function async2() { console.log('async2 end') } async1() setTimeout(function() { console.log(

js 异步执行顺序

江枫思渺然 提交于 2020-02-07 00:59:05
参考文章: js 异步执行顺序 1.js的执行顺序,先同步后异步 2.异步中任务队列的执行顺序: 先微任务microtask队列,再宏任务macrotask队列 3.调用Promise 中的resolve,reject属于微任务队列,setTimeout属于宏任务队列 注意以上都是 队列,先进先出。 微任务包括 `process.nextTick` ,`promise` ,`MutationObserver`。 宏任务包括 `script` , `setTimeout` ,`setInterval` ,`setImmediate` ,`I/O` ,`UI rendering`。 题目1: console.log('script start') async function async1() { await async2() console.log('async1 end') } async function async2() { console.log('async2 end') } async1() setTimeout(function() { console.log('setTimeout') }, 0) new Promise(resolve => { console.log('Promise') resolve() }) .then(function() {

【1/33】调用堆栈

你说的曾经没有我的故事 提交于 2020-02-06 03:44:46
33 文章目录 调用栈 JavaScript 引擎 执行上下文 创建执行上下文 变量环境: 执行阶段 javascript事件循环 setTimeout setInterval Promise与process.nextTick(callback) 调用栈 调用栈 是解释器(就像浏览器中的JavaScript解释器)追踪函数执行流的一种机制。当执行环境中调用了多个函数函数时,通过这种机制,我们能够追踪到哪个函数正在执行,执行的函数体中又调用了哪个函数。 拥有 LIFO(后进先出)数据结构的栈,被用来存储代码运行时创建的所有执行上下文。 当 JavaScript 引擎第一次遇到你的脚本时,它会创建一个全局的执行上下文并且压入当前执行栈。每当引擎遇到一个函数调用,它会为该函数创建一个新的执行上下文并压入栈的顶部。 每调用一个函数,解释器就会把该函数添加进调用栈并开始执行。每一个进入调用栈的都称为 调用帧 。 正在调用栈中执行的函数还调用了其它函数,那么新函数也将会被添加进调用栈,一旦这个函数被调用,便会立即执行。 当前函数执行完毕后,解释器将其清出调用栈,继续执行当前执行环境下的剩余的代码。 当分配的调用栈空间被占满时,会引发 堆栈溢出 。 JavaScript 引擎 谷歌的 V8 引擎: 在这里插入代码片 这个引擎主要由两部分组成: 内存堆:这是内存分配发生的地方 调用栈