javascript引擎长时间独占线程造成卡顿的解决方案

 更新时间:2014年12月03日 15:44:32   投稿:hebedich  
这篇文章主要介绍了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;

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

相关文章

  • JS闭包经典实例详解

    JS闭包经典实例详解

    这篇文章主要介绍了JS闭包,结合一个经典实例较为详细的分析了javascript闭包的原理及使用方法,需要的朋友可以参考下
    2018-12-12
  • js实现模拟购物商城案例

    js实现模拟购物商城案例

    这篇文章主要为大家详细介绍了js实现模拟购物商城案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 微信小程序实现tab页面切换效果

    微信小程序实现tab页面切换效果

    这篇文章主要为大家详细介绍了微信小程序实现tab页面切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • leaflet基本使用示例教程

    leaflet基本使用示例教程

    这篇文章主要介绍了leaflet基本使用示例教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-12-12
  • 整理Javascript基础语法学习笔记

    整理Javascript基础语法学习笔记

    整理Javascript基础语法学习笔记,之前一系列的文章是跟我学习Javascript,本文就是进一步学习javascript基础语法,希望大家继续关注
    2015-11-11
  • 分享8个JavaScript库可更好地处理本地存储

    分享8个JavaScript库可更好地处理本地存储

    这篇文章主要介绍了分享8个JavaScript库可更好地处理本地存储,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • webpack的 rquire.context用法实现工程自动化的方法

    webpack的 rquire.context用法实现工程自动化的方法

    这篇文章主要介绍了webpack的 rquire.context用法实现工程自动化的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 利用JS动态生成隔行换色HTML表格的两种方法

    利用JS动态生成隔行换色HTML表格的两种方法

    这篇文章主要介绍了利用JS动态生成隔行换色HTML表格的两种方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10
  • JavaScript–Apple设备检测示例代码

    JavaScript–Apple设备检测示例代码

    JavaScript–Apple设备检测示例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • javascript的console.log()用法小结

    javascript的console.log()用法小结

    console.log 原先是 Firefox 的 专利 ,严格说是安装了 Firebugs 之后的 Firefox 所独有的调试 绝招
    2012-05-05

最新评论