整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
JS的定時(shí)器目前有三個(gè)：setTimeout、setInterval和setImmediate。
內(nèi)容是《Web前端開(kāi)發(fā)之Javascript視頻》的課件，請(qǐng)配合大師哥《Javascript》視頻課程學(xué)習(xí)。
計(jì)時(shí)器：
Javascript是單線程語(yǔ)言，但它允許通過(guò)設(shè)置超時(shí)和間歇時(shí)間值來(lái)調(diào)度代碼在特定的時(shí)刻執(zhí)行；其是通過(guò)setTimeout()和setInterval()兩個(gè)window對(duì)象的全局函數(shù)實(shí)現(xiàn)的，用來(lái)注冊(cè)在指定的時(shí)間之后單次或重復(fù)調(diào)用的函數(shù)；
setTimeout()：
延遲代碼執(zhí)行（也叫超時(shí)調(diào)用）：用來(lái)實(shí)現(xiàn)一段代碼在指定的毫秒之后運(yùn)行；
語(yǔ)法：window.setTimeout(code,delay)，code要執(zhí)行的代碼，可以是一個(gè)包含Javascript的代碼字符串，也可以是一個(gè)函數(shù)，delay等待的毫秒數(shù)；
// 不建議傳遞字符串
setTimeout("alert('zeronetwork')",3000);
// 推薦的使用方式
setTimeout(function(){
alert('zeronetwork');
},3000);
// 推薦的使用方式
setTimeout(show,3000);
function show(){
alert('zeronetwork');
}因?yàn)闅v史原因，第一個(gè)參數(shù)可以傳遞字符串，但有可能導(dǎo)致性能損失，因?yàn)檫@個(gè)字符串會(huì)在指定的超時(shí)時(shí)間之后進(jìn)行求值，相當(dāng)于執(zhí)行eval()，因此不推薦使用字符串的形式；
// 能達(dá)到無(wú)限循環(huán)的目的
var n = 0;
function fun(){
n++;
console.log(n);
setTimeout(fun, 1000);
}
fun(); // 直接執(zhí)行
setTimeout(fun,3000);第二個(gè)參數(shù)是一個(gè)表示等待多長(zhǎng)時(shí)間的毫秒數(shù)，但經(jīng)過(guò)該時(shí)間后指定的代碼并不一定會(huì)執(zhí)行；Javascript是一個(gè)單線程的解釋器，因此一定時(shí)間內(nèi)只能執(zhí)行一段代碼；為了控制要執(zhí)行的代碼，就有一個(gè)Javascript任務(wù)隊(duì)列，這些任務(wù)會(huì)執(zhí)照將它們添加到隊(duì)列的順序執(zhí)行；這個(gè)參數(shù)實(shí)際上是告訴Javascript再過(guò)多長(zhǎng)時(shí)間把當(dāng)前任務(wù)添加到隊(duì)列中，如果隊(duì)列是空的，那么添加的代碼會(huì)立即執(zhí)行，如果隊(duì)列不是空的，那么它就要等前面的代碼執(zhí)行完畢后再執(zhí)行；
另外，如果該參數(shù)為0，也并不一定會(huì)立即執(zhí)行，因?yàn)橐残枰獙⑺诺疥?duì)列中，等待前面的任務(wù)全部執(zhí)行完后，才會(huì)“立即”執(zhí)行；
setTimeout()方法會(huì)返回一個(gè)數(shù)字ID，ID本質(zhì)上是要延遲進(jìn)程的ID，是計(jì)劃執(zhí)行代碼的唯一標(biāo)識(shí)符；可以使用clearTimeout()方法，調(diào)用此ID，達(dá)到取消超時(shí)調(diào)用的目的；
var timeoutid = setTimeout(function(){
alert("zeronetwork");
},3000);
console.log(timeoutid);
clearTimeout(timeoutid);只要是在指定的時(shí)間尚未過(guò)去之前調(diào)用clearTimeout()，就可以完全取消超時(shí)調(diào)用；
<input type="button" value="開(kāi)始" onclick="showClock()" />
<input type="button" value="取消" onclick="window.clearTimeout(ident)" />
<div id="showtime">time</div>
<script>
function showClock(){
var d = new Date();
var showtime = document.getElementById("showtime");
showtime.innerHTML = d.toLocaleString();
// ident = setTimeout(showClock(), 1000);
ident = setTimeout("showClock()", 1000);
}
</script>示例：可以利用 clearTimeout() 方法在特定條件下清除延遲處理代碼。例如，當(dāng)鼠標(biāo)指針移過(guò)某個(gè)元素，停留半秒鐘之后才會(huì)彈出提示信息，一旦鼠標(biāo)指針移出當(dāng)前元素，就立即清除前面定義的延遲處理函數(shù)，避免干擾；
<h1>零點(diǎn)網(wǎng)絡(luò)</h1>
<div>零點(diǎn)教育是從事IT教育</div>
<p>主講：零點(diǎn)網(wǎng)絡(luò)</p>
<script>
var o = document.getElementsByTagName('body')[0].childNodes;
for(var i=0; i<o.length; i++){
o[i].onmouseover = function(i){
return function(){
f(o[i]);
}
}(i);
o[i].onmouseout = function(i){
return function(){
clearTimeout(o[i].out);
}
}(i);
}
function f(o){
o.out = setTimeout(function(){
console.log(o.tagName + ":" + o.innerText);
},500);
}
</script>除前兩個(gè)參數(shù)之外，HTML5規(guī)范還允許setTimeout()傳入額外的參數(shù)，并在調(diào)用函數(shù)時(shí)把這些參數(shù)傳遞過(guò)去；
setTimeout(function(str,age){
alert(str + "age:" + age);
},3000,"wangwei",18);時(shí)間間隔setInterval()：
代碼延遲執(zhí)行機(jī)制在執(zhí)行一次后就失效，而在應(yīng)用中，有時(shí)希望某個(gè)程序能反復(fù)執(zhí)行，比如說(shuō)倒計(jì)時(shí)等，需要每秒執(zhí)行一次；為此可以使用window方法的setInterval方法，其會(huì)按照指定的時(shí)間間隔重復(fù)執(zhí)行代碼，直到取消或頁(yè)面被卸載；其與setTimeout()類似，參數(shù)也一致；
// 不建議使用字符串
setInterval("console.log('zero')", 3000);
// 推薦的方式
setInterval(function(){
console.log('zero');
},3000);
function timer(){
var d = new Date();
document.getElementById("result").innerText = d.toLocaleTimeString();
}
setInterval(timer,1000);
// 輸出的時(shí)間并不精確，并不是整1000毫秒
var firstTime = new Date().getTime();
setInterval(function(){
var lastTime = new Date().getTime();
console.log(lastTime - firstTime);
// alert("ok"); // 會(huì)暫停
firstTime = lastTime;
},1000);
同setTimeout()一樣，setInterval()也支持第三個(gè)參數(shù)；取消間隔性執(zhí)行代碼：
使用setInterval()方法同樣會(huì)返回一個(gè)間隔調(diào)用ID，該ID可用于在將來(lái)某個(gè)時(shí)間取消間隔調(diào)用；可以使用clearInterval方法移除間隔調(diào)用，其接收一個(gè)計(jì)時(shí)器ID作為參數(shù)；
// 如果不使用它的返回值，可以直接使用數(shù)字1、2...
var i = 0;
setInterval(function(){
console.log(i++);
if(i>10)
clearInterval(1);
},1000);取消間隔調(diào)用的重要性要遠(yuǎn)遠(yuǎn)高于取消超時(shí)調(diào)用，因?yàn)樵诓蝗∠那闆r下，間隔調(diào)用將會(huì)一直執(zhí)行到頁(yè)面卸載；
var num = 0, max = 10;
var intervalId = null;
function incNum(){
num++;
console.log(num);
// 如果執(zhí)行次數(shù)達(dá)到了max設(shè)定的值，則取消后續(xù)的調(diào)用
if(num == max){
clearInterval(intervalId);
alert("結(jié)束");
}
}
intervalId = setInterval(incNum, 1000);
// 另外
var mInput = document.getElementsByTagName('input')[0];
var sInput = document.getElementsByTagName('input')[1];
var m = 4,s = 52;
var timer = setInterval(function(){
s++;
if(s == 60){
s = 0;
m++;
}
sInput.value = s;
mInput.value = m;
if(m == 5)
clearInterval(timer);
},1000);setTimeout()與setInterval()同時(shí)使用時(shí)，其返回的id也會(huì)按順序返回；
在某些時(shí)候 setTimeout()與 setInterval() 可以實(shí)現(xiàn)同樣的效果；
var num = 0, max = 10;
function incNum(){
num++;
console.log(num);
// 如果執(zhí)行次數(shù)達(dá)到了max設(shè)定的值，則取消后續(xù)的調(diào)用
if(num < max){
setTimeout(incNum, 1000)
}else{
alert("結(jié)束");
}
}
setTimeout(incNum, 1000);在使用超時(shí)調(diào)用時(shí)，沒(méi)有必要使用超時(shí)調(diào)用ID，因?yàn)槊看螆?zhí)行代碼之后，如果不再設(shè)置另一次超時(shí)調(diào)用，調(diào)用就會(huì)自動(dòng)停止；
一般認(rèn)為，使用延遲代碼來(lái)模擬時(shí)間間隔是一種最佳方式；在開(kāi)發(fā)環(huán)境中，很少使用時(shí)間間隔，因?yàn)闀r(shí)間間隔可能會(huì)在前一個(gè)間隔調(diào)用結(jié)束之前啟動(dòng)，而延遲代碼完全可以避免這一點(diǎn)；
<div id="loadBar" style="border: red 1px solid;"></div>
<script>
var num = 0;
var colors = ['#494949','#646464','#747474','#888888','#969696','#A8A8A8','#B6B6B6','#C6C6C6','#D7D7D7','#E1E1E1','#F0F0F0','#F9F9F9'];
function loading(){
num++;
var loadBar = document.getElementById("loadBar");
loadBar.style.color = colors[num-1];
loadBar.innerHTML = loadBar.innerHTML + "■";
if(num < 12){
setTimeout(loading, 1000);
}else{
loadBar.style.display = "none";
window.open("https://www.zeronetwork.cn/","new");
}
}
window.onload = loading;
</script>
/*
定時(shí)器應(yīng)用函數(shù) invoke
如果只傳遞f,start，則使用setTimeout
如果沒(méi)有傳遞end,則永久循環(huán)執(zhí)行f，否則在end后停止
*/
function invoke(f, start, interval, end){
if(!start) start = 0; // 默認(rèn)設(shè)置為0毫秒
if(arguments.length <= 2) // 單次調(diào)用模式
setTimeout(f, start);
else{ // 多次調(diào)用模式
setTimeout(repeat, start); // 若干秒后調(diào)用repeat()
function repeat(){
var h = setInterval(f, interval); // 循環(huán)調(diào)用f()
// 在end毫秒后停止調(diào)用，前提是end已經(jīng)定義了
if(end){
setTimeout(function(){
clearInterval(h);
}, end);
}
}
}
}
invoke(function(){
console.log("wangwei");
},1000,2000,5000);Web前端開(kāi)發(fā)之JavaScript-零點(diǎn)程序員-王唯
5工具中，比較常聽(tīng)到的是易企秀這種以APP為主的移動(dòng)展示工具。這種類型的H5工具，定位為手機(jī)PPT的在線展示，操作簡(jiǎn)單，個(gè)人用戶較多。
但從功能豐富度和實(shí)用性角度，國(guó)內(nèi)屬于行業(yè)頂尖的是iH5和意派兩家，它們具有兩個(gè)共同的基本特征：
（1）提供HTML5頁(yè)面的可視化編輯器；
（2）通過(guò)電腦端網(wǎng)頁(yè)在線制作，能一鍵生成鏈接。
然而，兩者在本質(zhì)上有所差別，iH5偏向于底層交互，意派偏向于輕度營(yíng)銷。這兩個(gè)區(qū)別表面看上去很簡(jiǎn)單，背后有什么深意？
·
第1張圖：用戶的差別
類比圖像制作軟件，可以簡(jiǎn)單地概括為：
iH5：H5界的Photoshop，以企業(yè)用戶為主；
意派：H5界的美圖秀秀，以個(gè)人用戶為主。
從上圖可以看出，使用iH5的設(shè)計(jì)師，主要接受不同規(guī)模公司的定制需求，但也有部分個(gè)人用戶。由于面向底層交互，iH5提供的功能都是基礎(chǔ)應(yīng)用類型的，基本替代了傳統(tǒng)上由專業(yè)程序員編寫HTML5代碼的工作，更受企業(yè)青睞。因此，使用該工具的設(shè)計(jì)師一般處于品牌推廣團(tuán)隊(duì)中，負(fù)責(zé)成品頁(yè)面的實(shí)現(xiàn)。
使用意派的設(shè)計(jì)師，大部分接受來(lái)自個(gè)人或小公司的制作需求，但也有部分企業(yè)用戶。這種面向輕營(yíng)銷的H5工具，相當(dāng)于把PPT實(shí)現(xiàn)的功能通過(guò)在線網(wǎng)頁(yè)展示出來(lái)，交互思路以翻頁(yè)為主，更適用于個(gè)人用戶。但由于個(gè)人市場(chǎng)目前被易企秀這類更容易上手的APP所占領(lǐng)，意派所占份額實(shí)際比較有限。
·
第2-3張圖：功能的差別
H5頁(yè)面制作服務(wù)所需組件主要有四種類型：
（1）多媒體：iH5比意派多6個(gè)功能；
（2）容器：iH5比意派多6個(gè)功能；
（3）數(shù)據(jù)應(yīng)用：iH5比意派多7個(gè)功能；
（4）特效：iH5比意派多8個(gè)功能.
在上圖中，標(biāo)示Epub 360的四個(gè)彩色區(qū)域表示意派和iH5重疊的組件服務(wù)，灰色區(qū)域表示iH5獨(dú)有的組件。
意派在多媒體方面提供的服務(wù)與iH5比較接近，但在容器、數(shù)據(jù)應(yīng)用和特效三個(gè)方面都不及iH5的二分之一。如果只計(jì)算意派不具有的組件服務(wù)，iH5比意派多27個(gè)組件，但由于兩種工具部分組件存在交叉現(xiàn)象，從總量上看相差20個(gè)。
為什么會(huì)產(chǎn)生這樣的差距？
·
第4張圖：性能的差別
在iH5獨(dú)有的組件中，具有決定性作用的是“萬(wàn)金油”式的事件（組），能通過(guò)邏輯判斷為其他組件拓展出無(wú)限種可能：
手指按住屏幕的時(shí)間長(zhǎng)短；
手勢(shì)擦除面積的大小；
微信錄音的開(kāi)始或結(jié)束；
數(shù)據(jù)提交次數(shù)是否超限。
上圖是iH5在視頻組件下添加一個(gè)事件時(shí)，配套的18種觸發(fā)條件，表示能為視頻做18種邏輯判斷。
是否使用事件機(jī)制，對(duì)工具性能有很大影響——
（1）通過(guò)事件，iH5的設(shè)計(jì)師能對(duì)交互行為進(jìn)行邏輯判斷，并設(shè)計(jì)各種各樣的反饋動(dòng)作，比如設(shè)置視頻播放到某一時(shí)刻時(shí)彈出廣告。因此，用戶能利用事件的組合，規(guī)定成千上萬(wàn)種“如果……就……”的反應(yīng)情形。
（2）沒(méi)有事件，所有的組件都是割裂的，比如視頻的播放只能局限在視頻組件內(nèi)部進(jìn)行控制。這也導(dǎo)致意派有很多組件存在重復(fù)功能，因?yàn)槊總€(gè)組件的反饋機(jī)制基本是獨(dú)立的。
在事件的幫助下，設(shè)計(jì)師可以實(shí)現(xiàn)很多傳統(tǒng)上必須程序員介入才能完成的交互邏輯。既然事件那么重要，為什么國(guó)內(nèi)H5工具中只有iH5使用事件機(jī)制？
·
第5張圖：結(jié)構(gòu)的差別
實(shí)際上，iH5和意派的差別取決于工具結(jié)構(gòu)上的差異：
iH5：使用“對(duì)象樹”管理資源，頁(yè)面作為眾多資源的一種；
意派：使用頁(yè)面布局，主要提供基于頁(yè)面的翻頁(yè)交互。
下圖為兩個(gè)工具的編輯界面。
iH5以交互作為出發(fā)點(diǎn)，采用DOM（文檔對(duì)象模型）結(jié)構(gòu)，提供的組件基本是對(duì)象類型的，諸如屏幕、時(shí)間軸、數(shù)據(jù)庫(kù)等。因此，用戶能通過(guò)“對(duì)象樹”對(duì)不同類型的組件進(jìn)行管理，這也是事件機(jī)制可行的基礎(chǔ)。
意派則以模板作為出發(fā)點(diǎn)，采用頁(yè)面結(jié)構(gòu)，提供的組件基本是模塊類型的，諸如相冊(cè)、計(jì)時(shí)器等。實(shí)際上，這種工具相當(dāng)于收集不同類型HTML5網(wǎng)頁(yè)模板的源碼，把它們拆解成不同模塊，再分別開(kāi)發(fā)成套件。因此，用戶只能在預(yù)設(shè)格式的套件內(nèi)調(diào)整內(nèi)容，拓展性較低。
·
第6張圖：成本的差別
從費(fèi)用上來(lái)看，兩種工具的使用成本也有所差異：
iH5：所有組件的使用均免費(fèi)，對(duì)4種服務(wù)按需收費(fèi)；
意派：7個(gè)組件的使用需要付費(fèi)，對(duì)12種服務(wù)收取年費(fèi)。
意派將賬號(hào)分為體驗(yàn)版、基礎(chǔ)版、專業(yè)版、企業(yè)版和企業(yè)增強(qiáng)版五種類型，在作品創(chuàng)建數(shù)量、存儲(chǔ)空間、表單、數(shù)據(jù)應(yīng)用等基礎(chǔ)功能上均有限制，并對(duì)加載LOGO等服務(wù)進(jìn)行收費(fèi)，年費(fèi)最高達(dá)59999元。
iH5對(duì)自定義微信授權(quán)、自定義LOGO加載、調(diào)用第三方JS函數(shù)和作品嵌入第三方網(wǎng)站四種主要用于企業(yè)的服務(wù)進(jìn)行收費(fèi)，其中微信授權(quán)費(fèi)用為1元/月，所有增值服務(wù)按年計(jì)最高為12012元，為意派的五分之一。
·
雖然iH5和意派均提供基于云端的可視化編輯服務(wù)，但通過(guò)用戶、功能、性能、結(jié)構(gòu)、和成本五個(gè)方面的對(duì)比，可以看出兩者還是存在很大區(qū)別。
簡(jiǎn)單地說(shuō)，意派屬于輕度營(yíng)銷類H5工具，是通過(guò)利用HTML5的跨平臺(tái)特性，把傳統(tǒng)的離線PPT轉(zhuǎn)換為在線展示；而iH5是以交互為思路的基礎(chǔ)工具，能最大程度地取代程序員在網(wǎng)頁(yè)設(shè)計(jì)中的角色。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
