javascript引擎長(zhǎng)時(shí)間獨(dú)占線程造成卡頓的解決方案_javascript技巧

Javascript 引擎的單線程特性使得在處理一個(gè)較大的循環(huán)遍歷時(shí)會(huì)長(zhǎng)時(shí)間獨(dú)占線程，導(dǎo)致其它事件（例如用戶操作）無(wú)法及時(shí)響應(yīng)，嚴(yán)重時(shí)造成卡頓甚至是假死現(xiàn)象。為解決上述問題，一種可行機(jī)制是將大的循環(huán)拆分成若干小的循環(huán)片段分片執(zhí)行，使得Javascript 引擎有時(shí)機(jī)在各段之間插入執(zhí)行其它事情，從而有效改善性能體驗(yàn)

Ansync.js

代碼如下:
function Ansync (totalCount, segmentCount, workCallback, returnCallback)
{
var num_of_item_for_each_segment = segmentCount;
var num_of_segment = Math.ceil(totalCount / num_of_item_for_each_segment);
var count_of_segment = 0;
var timer;
var start, end;
this.process = function(scope, timeout)
{
if (scope != undefined)
{
workCallback = workCallback.bind(scope);
returnCallback = returnCallback ? returnCallback.bind(scope) : undefined;
}
if (count_of_segment == num_of_segment)
{
clearTimeout(timer);
if (returnCallback != undefined)
returnCallback();
}
else
{
start = count_of_segment * num_of_item_for_each_segment;
end = Math.min(totalCount, (count_of_segment + 1) * num_of_item_for_each_segment);
if (num_of_segment == 1)//needn't create timer
{
workCallback(start, end);
count_of_segment = 1;
this.process();
}
else
{
timer = setTimeout(function ansyncTimeout(){
if (workCallback(start, end)) //finish process if function returns true
{
count_of_segment = num_of_segment;
}
else
{
count_of_segment++;
}
this.scope.process();
}.bind({scope: this}),timeout == undefined ? Ansync.TimeOut : timeout);
}
}
}
}
Ansync.TimeOut = 5;

方法很簡(jiǎn)單，但是很實(shí)用，有相同項(xiàng)目需求的小伙伴參考下吧

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com