setTimeOut和onSchedule的区别 settimeout

setTimeout 丢帧setTimeout通过设置一个间隔时间来不断的改变图像的位置,从而达到动画效果 。但利用seTimeout实现的动画在某些低端机上会出现 卡顿、抖动 的现象 。
这种现象的产生有两个原因:
setTimeout的执行时间并不是确定的。setTimeout任务被放进了异步队列中,只有当主线程上的任务执行完以后,才会去检查该队列里的任务是否需要开始执行,因此 setTimeout 的实际执行时间一般要比其设定的时间晚一些 。
刷新频率受 屏幕分辨率 和 屏幕尺寸 的影响,不同设备的屏幕刷新频率可能会不同,而setTimeout只能 设置一个固定的时间间隔,这个时间不一定和屏幕的刷新时间相同 。
以上两种情况都会导致setTimeout的执行步调和屏幕的刷新步调不一致,从而引起 丢帧 现象 。
为什么步调不一致就会引起丢帧呢?
setTimeout的执行只是在内存中对图像属性进行改变,这个变化必须要等到屏幕下次刷新时才会被更新到屏幕上 。如果两者的步调不一致,就可能会导致中间某一帧的操作被跨越过去,而直接更新下一帧的图像 。假设屏幕每隔16.7ms刷新一次,而setTimeout每隔10ms设置图像向左移动1px,就会出现如下绘制过程:
第0ms: 屏幕未刷新,等待中,setTimeout也未执行,等待中;
第10ms: 屏幕未刷新,等待中,setTimeout开始执行并设置图像属性left=1px;
第16.7ms: 屏幕开始刷新,屏幕上的图像向左移动了 1px,setTimeout 未执行,继续等待中;
第20ms: 屏幕未刷新,等待中,setTimeout开始执行并设置left=2px;
第30ms: 屏幕未刷新,等待中,setTimeout开始执行并设置left=3px;
第33.4ms:屏幕开始刷新,屏幕上的图像向左移动了 3px,setTimeout未执行,继续等待中;

从上面的绘制过程中可以看出,屏幕没有更新left=2px的那一帧画面,图像直接从1px的位置跳到了3px的的位置,这就是丢帧现象,这种现象就会引起动画卡顿 。
setTimeout的返回值答案:
1. setTimeout 是有返回值的,表示当前setTimeout在页面中的所有setTimeout中的序号 。
2. 作用:当使用clearTimeout的时候,就可以直接传入序号,准确结束掉某个setTimeout

setTimeOut和onSchedule的区别 settimeout

文章插图
setTimeout和setInterval方法的区别?因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次 。而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式 。所以,完全是不一样的
很多人习惯于将setTimeout包含于被执行函数中,然后在函数外再次使用setTimeout来达到定时执行的目的 。这样,函数外的setTimeout在执行函数时再次触发setTimeout从而形成周而复始的定时效果 。使用的时候各有各的优势,使用setInterval,需要手动的停止tick触发 。而使用方法中嵌套setTimeout,可以根据方法内部本身的逻辑不再调用setTimeout就等于停止了触发 。其实两个东西完全可以相互模拟,具体使用那个,看当时的需要而定了 。
setTimeOut和setInterval工作原理昨天看高性能javascript 。看到了关于这俩的工作原理记录一下
setTimeout与setInterval使用方法基本相同,他们接受两个参数,第一个参数是需要执行的函数,第二个参数是执行的延迟时间 。
以上都是我们熟悉的内容 。
setTimeout在指定的延迟时间到达后 向ui队列添加一个任务,函数会立即执行 。
并不是说在指定的Time后,ui一定会立马执行,而是在Time之后添加一个任务 。通常setTimeout执行时的时间会比我们设定的Time要长 。因为这个任务会等待队列中的其他任务执行完之后再执行 。
【setTimeOut和onSchedule的区别 settimeout】 对于setInterval,和setTimeout一样,会在指定间隔时间到之后向ui队列添加任务,但是有一点 。如果队列中已经有同一个setInterval的任务存在,就不往里面添加setInterval的任务 。
这也是这俩定时器的主要区别 。
setTimeout函数问题首先,setTimeout是可以取消的,可以不让其永远不终止,方法如下:
var timer = null;
function f(){
alert("k");
timer = setTimeout(f,1000);
}
// 在另外一个函数中,在某种条件下,取消之前的定时器
clearTimeout(timer);
这样,timer就不再执行了,也就不会再次调用函数f,生成新的定时器 。
其次,关于内存,js类似于java有垃圾回收机制,一些不会再次用到的变量等,会被清理 。只要是作用域不逃出函数f的,函数f执行完毕后,js总是有办法将其销毁,当然不一定百分百销毁 。这样的话,内存怎么会越来越多呢?只有函数f在执行的时候会多一些,但随即又会被清理的 。

秒懂生活扩展阅读