JavaScript 如何实现后台计划任务
即使忘了 JavaScript 的一切知识，也不会忘记：它是阻塞的。 想象一下，你的浏览器里住着一个魔法小精灵，负责浏览器的正常运转。不论渲染 HTML，响应菜单命令，屏幕渲染，处理鼠标
即使忘了 JavaScript 的一切知识，也不会忘记：它是阻塞的。
想象一下，你的浏览器里住着一个魔法小精灵，负责浏览器的正常运转。不论渲染 HTML，响应菜单命令，屏幕渲染，处理鼠标点击，或者执行 JavaScript 函数，所有事情都归一个小精灵处理。它哪忙得过来，一次只能处理一件事情。如果同时丢给它一堆任务，它会列一个长长的待办列表，按顺序完成它们。
人们常常希望初始化组件和事件处理的 JavaScript 可以尽快被执行。可是，有些不太重要的后台任务不会直接影响用户体验，比如：
记录统计数据
发送数据到社交网络（或添加&分享&按钮）
预加载内容
预处理或预渲染 HTML
他们对时序要求不严格，但是为了让页面仍然响应，直到用户滚动页面或者与内容交互时才被执行。
选择之一是&Web Workers&，它可以在独立的线程同时执行代码。用于预加载和预处理再好不过，但是你没有权限直接访问或更新 DOM。你可以在自己的代码中避开这点，但是无法保证第三方脚本比如 Google Analytics 永远不需要这个。
另一个选择是&setTimeout&，比如&setTimeout(doSomething, 1);&。一旦其它的立即执行任务执行完毕，浏览器将执行&doSomething()&函数。实际上，它被放到了待办列表的底部。不幸的是，函数将被调用，而不顾处理需求。
#requestIdleCallback
requestIdleCallback&是新API，当浏览器稍作喘息的时候，用来执行不太重要的后台计划任务。 难免让人想起&requestAnimationFrame&，在下次重绘之前，执行函数更新动画。 想了解更多戳这里：&使用 requestAnimationFrame 做简单的动画&。
requestIdleCallback&特性监测：
if ('requestIdleCallback' in window) {
// requestIdleCallback supported
requestIdleCallback(backgroundTask);
// no support - do something else
setTimeout(backgroundTask1, 1);
setTimeout(backgroundTask2, 1);
setTimeout(backgroundTask3, 1);
也可以指定配置参数对象，比如 timeout，
requestIdleCallback(backgroundTask, { timeout: 3000; });
确保函数在3秒之内调用，不管浏览器是否空闲。
deadline&对象传入以下参数时，&requestIdleCallback&仅执行一次回调：
didTimeout&&& 如果可选的 timeout 触发，则设置为 true
timeRemaining()&&& 函数返回执行任务剩余的毫秒数&
timeRemaining()&最多分配50ms用于任务的执行，超过这个限制，也不会停止任务，但是，最好重新调用&requestIdleCallback&安排进一步的处理。
我们来创建一个简单的例子，让几个任务按序执行。任务的函数引用储存在数组中：
//待执行的函数数组
var task = [
background1,
background2,
background3
if ('requestIdleCallback' in window) {
//支持 requestIdleCallback
requestIdleCallback(backgroundTask);
//不支持 && 立刻执行所有任务
while (task.length) {
setTimeout(task.shift(), 1);
//requestIdleCallback 回调函数
function backgroundTask(deadline) {
//如果存在，执行下一个任务
while (deadline.timeRemaining() & 0 && task.length & 0) {
task.shift()();
//需要的话，安排进一步任务
if (task.length & 0) {
requestIdleCallback(backgroundTask);
#一次 requestIdleCallback 之间不应该做什么？
Paul Lewis 在&他的文章&中提到，一次 requestIdleCallback 执行的任务应该切成小块。它不适用于不可预知时间的情况（比如操作 DOM，使用 requestAnimationFrame 回调更好些）。resolving（或者 rejecting）Promises 时也要谨慎，即使没有更多的剩余时间，空闲回调完成之后，回调函数也将立即执行。
#requestIdleCallback 浏览器支持情况
requestIdleCallback&是试验性特性，规范仍不稳定，碰到 API 变更时不足为奇。Chrome 47 已支持& 2015年结束前应该可用了。Opera 应该会紧跟其后。Microsoft 和 Mozilla 都在考虑 API 是否应该支持 Promises 。Apple 像往常一样不鸟。
Paul Lewis（上文提到的）写了一个简单的&requestIdleCallback shim&，它可以模拟浏览器的空闲监测行为，但不是一个 polyfill（&shim 和 polyfill 的区别&）。
requestIdleCallback shim代码如下：
* Copyright 2015 Google Inc. All rights reserved.
* Licensed under the Apache License, Version 2.0 (the &License&);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an &AS IS& BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
* or implied. See the License for the specific language governing
* permissions and limitations under the License.
* @see /web/updates/2015/08/using-requestidlecallback
window.requestIdleCallback = window.requestIdleCallback ||
function (cb) {
var start = Date.now();
return setTimeout(function () {
didTimeout: false,
timeRemaining: function () {
return Math.max(0, 50 - (Date.now() - start));
window.cancelIdleCallback = window.cancelIdleCallback ||
function (id) {
clearTimeout(id);
(责任编辑：最模板)
------分隔线----------------------------
一说起CSS隐藏元素，我想大部分小伙伴们都会想到的第一种方法...
对一张表单，希望通过不同的按钮，将表单值转向不同的页面，...
用top或者bottom来设置他们的相对父容器（最近一代的相对定位的...
做成的效果就是如上图所示的效果,那么要做到这种效果需要了解...
使用苹果电脑的朋友,都知道,在桌面的下方有个DOCK,就是一个存放...
CopyRight (C)
最模板 , 深圳奇好科技有限公司 All Rights Reserved.在 JS 中如何调度后台任务？ - WEB前端 - 伯乐在线
& 在 JS 中如何调度后台任务？
关于 JavaScript，就算什么都不记得了，也请牢记这一点：它是阻塞式的。
想象一下，你的浏览器是靠一个神奇的小精灵来运行的。所有的事情都是这一个小精灵来干的，不管是渲染 HTML、响应菜单的命令、在屏幕上绘图、处理鼠标点击，还是执行一个 JavaScript 函数。和我们大多数人一样，小精灵同时只能做一件事。如果我们把好多事都丢给小精灵，它们会被排到一个待处理列表中，按照顺序依次执行。
当小精灵碰到一个 script 标签，或者必须运行一个 JavaScript 函数的时候，所有事情都得停下来。首先得下载代码（如果需要的话），然后立即执行这些脚本，再然后才能继续执行后面的事件或者渲染操作。这个过程是必须的，因为你的脚本可能执行任何操作：加载后续代码、移除所有 DOM 元素、跳转到其他的 URL 等等。就算有两个或者更多的小精灵，在第一个小精灵处理你的代码的时候，剩下那些也得停下来等着。这就是所谓的阻塞式。在长时间运行脚本的时候，正式这种机制导致了浏览器会失去响应。
你经常希望你的 JavaScript 代码能够尽快执行，因为这些代码会初始化组件和事件处理函数。然而，也有一些不那么重要的后台任务，它们并不会直接影响用户体验，例如：
记录分析数据
把数据发送到社交网络（或者添加 57 个“分享”按钮）
内容预读取
HTML 的预处理或者预渲染
这些任务在时间上并不是那么重要，不过为了让页面保持响应，在用户滚动页面或者与内容进行交互的时候，它们就不应该运行了。
选择之一是使用 ，它可以在一个独立的线程中并行运行。对于内容预读取和预处理工作而言，这是个不错的选择，不过在 Web Worker 中，你无法直接访问或者更新 DOM。当然你可以在你自己的代码中避免这一点，但你无法保证永远不会依赖第三方代码，比如 Google Analytics。
另一种可能的方式是使用 setTimeout，比如：setTimeout(doSomething, 1);。浏览器会在其它立即执行的任务完成后，再去执行 doSomething() 函数。实际上，这种方式是把它放到了待处理列表的最后面。不幸的是，不管是否需要，这个函数最终都会被调用。
requestIdleCallback
是一个全新的 API，它可以在浏览器空闲的时候去调度那些不那么重要的后台任务。与之类似的还有 ，可以通过调用一个函数在下一次重绘之前更新动画。更多关于 requestAnimationFrame 的内容请见：。
我们可以通过如下方法检测浏览器是否支持 requestIdleCallback：
JavaScript
if ('requestIdleCallback' in window) {
// requestIdleCallback supported
requestIdleCallback(backgroundTask);
// no support - do something else
setTimeout(backgroundTask1, 1);
setTimeout(backgroundTask2, 1);
setTimeout(backgroundTask3, 1);
12345678910
if ('requestIdleCallback' in window) {&&// requestIdleCallback supported&&requestIdleCallback(backgroundTask);}else {&&// no support - do something else&&setTimeout(backgroundTask1, 1);&&setTimeout(backgroundTask2, 1);&&setTimeout(backgroundTask3, 1);}
也可以指定一个 options 对象作为参数，其中包含超时时间（以毫秒为单位），例如：
JavaScript
requestIdleCallback(backgroundTask, { timeout: 3000; });
requestIdleCallback(backgroundTask, { timeout: 3000; });
这种方式可以确保你的函数在前 3 秒之内被调用，不论浏览器是否空闲。
requestIdleCallback 只会调用你的函数一次，并传递一个 deadline 对象，该对象内包含如下属性：
didTimeout — 如果上文提到的超时事件被触发了，该属性为 true
timeRemaining() — 该函数会返回执行任务所剩余的毫秒数
timeRemaining() 会给任务运行分配不超过 50 毫秒的时间。如果任务执行超过这个时间的话，任务并不会被强行终止，不过推荐的做法是，此时你应该再次调用 requestIdleCallback 来调度后续的处理流程。
让我们创建一个简单的示例，按照顺序执行多个任务。这些任务存储在一个数组中，该数组会在函数内使用：
JavaScript
// array of functions to run
var task = [
background1,
background2,
background3
if ('requestIdleCallback' in window) {
// requestIdleCallback supported
requestIdleCallback(backgroundTask);
// no support - run all tasks soon
while (task.length) {
setTimeout(task.shift(), 1);
// requestIdleCallback callback function
function backgroundTask(deadline) {
// run next task if possible
while (deadline.timeRemaining() & 0 && task.length & 0) {
task.shift()();
// schedule further tasks if necessary
if (task.length & 0) {
requestIdleCallback(backgroundTask);
12345678910111213141516171819202122232425262728293031
// array of functions to runvar task = [ background1, background2, background3];&if ('requestIdleCallback' in window) {&&// requestIdleCallback supported&&requestIdleCallback(backgroundTask);}else {&&// no support - run all tasks soon&&while (task.length) {&& setTimeout(task.shift(), 1);&&}}&// requestIdleCallback callback functionfunction backgroundTask(deadline) {&&&// run next task if possible&&while (deadline.timeRemaining() & 0 && task.length & 0) {&& task.shift()();&&}&&&// schedule further tasks if necessary&&if (task.length & 0) {&&&&requestIdleCallback(backgroundTask);&&}}
是否有什么事情是不应该放在 requestIdleCallback 中执行的？
Paul Lewis 在他的，在 requestIdleCallback 中执行的操作应该是小片段的形式，不应该执行那些运行时间无法预测的任务（比如处理 DOM 更适合使用 requestAnimationFrame 回调）。你同样需要当心 Promise 对象的 resolve 或 reject，因为在空闲回调结束后，即使已经没有剩余时间，Promise 的回调也会立即执行。
requestIdleCallback 的浏览器支持情况
requestIdleCallback 是一个试验性质的特性，规范依然有可能会发生变化，所以如果你遇到了 API 变动的情况请不要吃惊。Chrome 47 支持该特性，也就是说应该在 2015 年结束之前。Opera 也应该很快就会支持该特性。微软和 Mozilla 也在考虑该 API，看起来问题不大。苹果公司一如既往地对此不置可否。如果你现在就要尝尝鲜，你的最佳选择是使用 （最新版本的 Chrome，没有经过全面测试，但是其中包含了最新的特性）。（译注：在本文翻译时 Chrome 47 已经发布，并支持该特性）
之前提到的 Paul Lewis 创建了一个简单的 。它会实现同样功能的 API，不过它并不是完整的，因为没有模拟浏览器的空闲行为检测。它是靠 setTimeout 来完成功能的，正如上面的例子一样。如果你想要使用该 API，又不想做对象检测和代码更新的话，这也是个不错的选择。
尽管到目前为止支持还比较有限，requestIdleCallback 还是个有趣的东西，可以帮助你最大限度的优化网页性能。不过你是怎么想的呢？欢迎在本文下方发表你的评论。
打赏支持我翻译更多好文章，谢谢！
打赏支持我翻译更多好文章，谢谢！
关于作者：
可能感兴趣的话题
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线20个简化开发任务的 JavaScript库 - 文章 - 伯乐在线
& 20个简化开发任务的 JavaScript库
所谓JavaScript库就是预先写好的可以简化基于JavaScript的应用程序开发的,尤其是Ajax和其它以web为中心的技术的 JavaScript代码集。JavaScript主要用于写内嵌于HTML页面并和文档对象模型（DOM）进行打交道的各种函数(Function)。
一些JavaScript库很容易的和其它Web技术行进整合，譬如CSS, PHP, Ruby和Java。许多库可以检测不同的运行环境，并且消除应用程序为了兼容不一致而需要写的代码。
本文搜集了20个 JavaScript 库，它们能理清你遇到的开发相关的问题，让你的网站在竞争中领先一步。我们希望你能发现这个JavaScript库的列表对你的开发工作方便有用。尽情享受吧！
1. Tracking.js
Tracking.js 是一个独立的JavaScript库，用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者 检测一个人体/脸的出现与移动，来触发JavaScript 事件。它是非常易于使用的API，具有数个方法和事件（足够使用了）。
2. Aristochart
Aristochart 是一个不依赖于其他库的 JavaScript 库，其功能是绘制二维的静态线图，使用 Canvas 绘制。该库特点是可定制，提供大量选项来更改设计、标签等等。
Hitch是一个轻量级的JavaScript库,它添加了CSS文件表现能力。它拥有CSS前缀或者变量强大的预处理能力,但也有一些其它的东西。这个类库出现了多个现成的选择器,比如”anyof, allof, has..”同时允许我们去定义任何新的(叫做 hitches)。
Cesium,一个基于WebGL的 JavaScript 绘图库， 通过其内部机制提供了这个能力。它支持3种不同的视图: 3D globe, 2D map,和 2.5D Columbus View ，从一种到另一种转换只需要一行代码。 画任何类型的形状，突出显示特定的地区以及使用鼠标或触摸与地图交互，都相当简单。Cesium只有一个 JS 文件，可在包括手机在内的所有主流浏览器运行。
Two.js 是一个令人激动的JavaScript库。它为SVG,Canvas和WebG提供二维和单一绘图API。这个类库目前仅仅支持形状(没有文字或图像)。它允许引入SVG数据。有用的地方在于它能够聚合多种元素,当需要将他们转化在一起。有一个内置的动画循环,方法去绘制知名的形状和多种选择去自定义它们。
6. Sequel.js
Squel.js 是一个轻量级的JavaScript库。通过面对对象的API,它很容易就帮助我们建立SQL查询字符串。
它工作在所有的浏览器上(不被建议,因为查询可见)。通过node.js的帮助,它能够支持标准的SQL查询(它能够被定制去操作非标准的查询)
7. Draggabilly
Draggabilly使得jQuery UI的拖拽交互变得容易了。它是一个独立的，轻量级的JavaScript库，元素的拖动可以限制在一个有此特性的容器当中，并且拖拽过程中每个事件（开始、移动、结束）都存在回调函数，它们也可以返回该元素的位置。
Zebra是一个JavaScript库，带有一批用来创建类似桌面效果布局的富用户界面组件。UI元素通过HTML5 canvas创建，由CSS着色，预期在所有现代浏览器中渲染出相同的效果。有30+ UI 组件，包括grid, tabs, menu, form elements, menu 等许多许多.
9. Formula.js
Formula.js 是一个JavaScript类库。对web开发者而言,它实现大部分公式。列出了公式的多个分类例如日期/时间,文本,逻辑,金额等。此外,客户端它需要和node.js(即将被发布)工作。
10. Chart.js
Chart.js 是一个令人印象深刻的图表类库,建立在HTM5 canvas之上。目前,它支持6种图表类型 (折线图,条形图,雷达图,饼图,柱状图和极地区域区)。而且这是一个独立的包,大小小于5kb。颜色，字体，边框和它们的尺寸都可以定制，图表可以动画 的形式加载，非常炫。
11. Flippant.js
Flippant.js 是一个迷你的JavaScript和CSS类库。它能够让你的页面事物产生翻转. 他不需要依赖别的类库,能够非常简单被定制,出口单一功能：翻转。
React是一个JavaScript类库目的是创建用户接口。它是足够高效,灵活地去和你所知道的库或框架很好地工作。
13. PathFinding.js
PathFinding.js是javascript中一个综合性的路径查找库。该项目的目标是提供一个易于集成到网页游戏中的路径查找库。它可能运行在 Node.js或浏览器上。它提供了一个在线演示展示了算法是如何执行的。当实例化路径查找器时，你可以传递额外的参数来指明使用的查找策略。
14. Reactor.js
Reactor 是用于响应式编程的轻量级库。它提供了响应变量，这些变量会在它们依赖的东西变化的时候,进行自动更新。 这类似于电子表格的工作方式，一些单元格可以根据其它单元格的变化自动改变自己的数值。
15. Bootbox.js
Bootbox.js 是一个小的JavaScript库，它允许您通过Twitter的Bootstrap模型，创建程序性对话框， 而不需要考虑创建，管理或者去除任何需要的DOM元素 或 JS事件处理程序。
16. Parallel.js
Parallel.js 是用于在JavaScript中进行多核处理的微型库。它的创建发挥了以前成熟的web-workers API 的优势。没错 Javascript是很快，但由于它的单线程计算模型，它缺乏了与其对等语言的并行计算功能。
17. SVG.js
SVG.js 是一个JavaScript类库。它可以非常简单地通过SVG操作动画。这个类库是单独的,不依赖别的类库。它是轻量级的,大小只有5kb。但是它有许多的功能。它有内置的方法去创建图形(三角形,圆形,多边形等等)或者定义图形
18. Packery
Packery 是一个使用”装箱”算法的Js布局库。这是“补漏”的体面说法。 Packery的布局可以是智能有序的，也可以是有组织狂野的。节点可以被固定在某一处，或找到某一处完美的地方，也可以被随意拖动。
19. FPS Meter
FPSMeter 是一个简单的JavaScript库，用来制作迷人、快速、可主题化的FPS仪表。它能计量每秒帧数， 帧之间的毫秒数，以及当使用.tickStart()方法时，渲染一帧所需要的毫秒数。
Howler.js 默认是基于网页音频接口的一个Js库，当浏览器不支持时，它返回HTML5音频。为了保证跨浏览器兼容性，它允许接收多种文件格式。该库能同时缓存和播放 多个声音(能对他们单个的或则全局的进行静音或关闭静音).该库拥有声音进行循环播放功能、淡入/淡出效果和标准的多媒体控制功能。
可能感兴趣的话题
有的还收费啊
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线内容团队正试图以我们微薄的力量，把优秀的原创文章和译文分享给读者，为“快餐”添加一些“营养”元素。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线天极传媒：天极网全国分站
您现在的位置：
& &&应用实例：用Javascript实现定时任务
应用实例：用Javascript实现定时任务天极网 08:00
　　作定时处理的话，我们首先考虑到的就是自己写个程序，然后把这个程序部署到Win的计划任务中。
　　这个程序可以是简单的批处理dat，也可以是一个js文件。当然更复杂的dll，exe也可以。
　　考虑到方便性，护，我推荐用js文件。
　　下面是个简单的js范例文件。
　　他的功能是:访问一个页面，如果发现这个页面异常重起iis服务。
　　把它部署到计划任务中，就可以对Web站点进行监控。
以下是引用片段：　　if(!CheckUrl()) 　　{ 　　WScript.Echo("iisreset"); 　　var&s&=&new&ActiveXObject("WScript.Shell"); 　　s.Run("iisreset"); 　　} 　　else 　　{ 　　WScript.Echo("OK"); 　　} 　　function&CheckUrl() 　　{ 　　try 　　{ 　　var&xh=new&ActiveXObject("Microsoft.XMLHTTP"); 　　xh.open("GET","http://localhost/quickstart/aspplus/doc/businessobjs.aspx",false); 　　xh.send(""); 　　return&xh.status&==&200; 　　} 　　catch(&X&) 　　{ 　　return& 　　} 　　} 　　以上使用&Microsoft.XMLHTTP&如果一个站点没有响应，他会一直等下去。改成&MsXML2.ServerXMLHTTP&就可以避免这个问题。参考下面函数: 　　function&CheckUrl() 　　{ 　　try 　　{ 　　//&使用这个，可以设置超时时间，不用一直等待。 　　var&XMLServerHttp&=&new&ActiveXObject("MsXML2.ServerXMLHTTP"); 　　var&lResolve&=&5&*&1000; 　　var&lConnect&=&5&*&1000; 　　var&lSend&=&15&*&1000; 　　var&lReceive&=&15&*&1000; 　　XMLServerHttp.setTimeouts(lResolve,&lConnect,&lSend,&lReceive); 　　XMLServerHttp.open("GET",&"http://localhost/quickstart/aspplus/doc/businessobjs.aspx",&false); 　　XMLServerHttp.send(); 　　return&XMLServerHttp.status&==&200; 　　} 　　catch(&X&) 　　{ 　　return& 　　} 　　}
　　如果你要访问的页面是需要身份验证的。
　　请参考:
　　oXMLHttpRequest.open(Method, Url, Async, User, Password)
　　/dom/dom_http.asp
　　以上解决方案，感谢Lostinnet和思归的帮助。
&&阅读关于
的全部文章
（作者：龙犊整理责任编辑：龙犊）
天极新媒体&最酷科技资讯扫码赢大奖
* 网友发言均非本站立场，本站不在评论栏推荐任何网店、经销商，谨防上当受骗！
Win10系统在Win8的基础上对界面、特性以及跨平台方面做了诸多优化。
手机整机DIY企业级}