javascript引擎长时间独占线程造成卡顿的解决方案_Javascript教程-查字典教程网
javascript引擎长时间独占线程造成卡顿的解决方案
javascript引擎长时间独占线程造成卡顿的解决方案
发布时间:2016-12-30 来源:查字典编辑
摘要:Javascript引擎的单线程特性使得在处理一个较大的循环遍历时会长时间独占线程,导致其它事件(例如用户操作)无法及时响应,严重时造成卡顿...

Javascript 引擎的单线程特性使得在处理一个较大的循环遍历时会长时间独占线程,导致其它事件(例如用户操作)无法及时响应,严重时造成卡顿甚至是假死现象。为解决上述问题,一种可行机制是将大的循环拆分成若干小的循环片段分片执行,使得Javascript 引擎有时机在各段之间插入执行其它事情,从而有效改善性能体验

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;

方法很简单,但是很实用,有相同项目需求的小伙伴参考下吧

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类