`
mutongwu
  • 浏览: 450162 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

数组任务分解防止页面假死

阅读更多
当对一个数组的每一项进行处理,处理时间比较长的时候,浏览器会因为忙于计算而无法接收用户的请求,如页面点击无反应等,从而出现假死状态。解决方法:
使用定时器分解任务,在任务切换‘空隙’可以允许浏览器对用户操作进行相应。
原始代码:
for (var i=0, len=items.length; i < len; i++){
    process(items[i]);
}


改进后:
var todo = items.concat(); //create a clone of the original
setTimeout(function(){
  //get next item in the array and process it
  process(todo.shift());
  //if there's more items to process, create another timer
  if(todo.length > 0){
    setTimeout(arguments.callee, 25);
  } else {
    callback(items);
  }
}, 25);


将其封装为一个函数,以便重用:
function processArray(items, process, callback){
	var todo = items.concat(); //create a clone of the original
	setTimeout(function(){
	    process(todo.shift());
	    if (todo.length > 0){
	        setTimeout(arguments.callee, 25);
	    }
	    else {
	        callback(items);
	    }
	}, 25);
}

例子
var items = [123, 789, 323, 778, 232, 654, 219, 543, 321, 160];
function outputValue(value){
    console.log(value);
}
processArray(items, outputValue, function(){
    console.log("Done!");
});



原文出自:High Performance Javascript
分享到:
评论

相关推荐

    php数组分解实例源码

    数组分解,也称为数组解构,是指将一个数组中的元素分配到不同的变量中,这在处理复杂的数据结构时尤其有用。本实例将深入探讨如何在PHP中进行数组分解,并提供相关的源代码示例。 一、数组分解的基本概念 在PHP中...

    IOS防止数组越界

    在iOS开发中,数组越界是一个常见的编程错误,它会导致应用程序崩溃,严重影响用户体验。这个问题尤其在处理用户交互、...在实际项目中,根据项目需求和团队规范,选择合适的方法和工具来防止数组越界是至关重要的。

    C/C++ 避免数组越界的方法

    C/C++ 避免数组越界的方法 C/C++ 中的数组越界是一种常见...避免数组越界是编程中的一项重要任务,程序员需要预先推断数组的大小和边界,并在访问数组时进行严格的边界检查,同时也可以使用一些技术来避免数组越界。

    微信小程序——二维数组添加机柜页面.zip

    总的来说,“二维数组添加机柜页面”是一个融合了数据结构、前端渲染、用户交互和状态管理的综合性开发任务。开发者需要具备扎实的JavaScript基础,了解微信小程序的开发框架,并且能够灵活运用这些知识来实现功能...

    使用数据集还是数组分解

    本文将深入探讨这两种数据结构的特点,帮助你理解何时应使用数据集,何时应选择数组分解。 首先,数组是一种基本的数据结构,它存储同类型元素的集合。数组的优点在于访问速度快,因为它们在内存中是连续存储的,...

    分割元胞数组_matlab

    资源名:分割元胞数组_matlab 资源类型:matlab项目全套源码 源码说明: 全部项目源码都是经过测试校正后百分百成功运行的,如果您下载后不能运行可联系我进行指导或者更换。 适合人群:新手及有一定经验的开发人员

    matlab矩阵与数组分解PPT教案学习.pptx

    matlab矩阵与数组分解PPT教案学习.pptx

    Java程序设计基础:一维数组应用数组作为方法形参.pptx

    任务1、使用随机数初始化一个整型数组 任务2、显示一个整型数组中的所有元素 任务3、对数组元素求平均 任务4、将数组内容反向存储 1、使用随机数初始化一个整型数组 数组作为方法的形参 public static void init( ) ...

    数组中最大和的子数组

    在编程领域,数组是最基本的数据结构之一,而寻找数组中最大和的子数组问题是一个经典的算法问题,它属于动态规划的范畴。这个问题的目标是找到数组中的一个连续子数组,使得这个子数组的所有元素之和最大。 首先,...

    将html文件转为C数组小工具

    C数组可以看作是内存中的一个连续区域,用于存储数据。通过这种方式,HTML文件的内容可以作为程序的一部分被加载到内存中,当需要响应HTTP请求时,直接从数组中读取并发送出去。 接下来,我们介绍如何使用...

    js数组相减简单示例【删除a数组所有与b数组相同元素】

    本文详细讲解了如何使用JavaScript进行数组相减的操作,即删除数组a中所有与数组b相同的元素。这涉及到JavaScript中的数组遍历、元素比较以及数组的删除操作等核心知识。通过具体示例,我们学习了如何编写一个函数来...

    三维数组操作_labview三维数组_labview_三维数组_

    通过熟练掌握数组构造、索引、切片、插入和删除等操作,开发者能够更好地应对各种复杂的计算任务。在实际项目中,结合“三维数组操作.vi”这样的范例,可以加深对这些概念的理解并应用于实际问题的解决。

    ios-runtime 防止数组越界崩溃.zip

    `ios-runtime 防止数组越界崩溃.zip` 提供了一个解决方案,通过导入名为`NSObject+runtime`的分类来解决这些问题,而无需额外编写代码。 首先,我们来看数组越界问题。在Objective-C或Swift中,当尝试访问数组的一...

    vue 解决数组赋值无法渲染在页面的问题

    在做一个网页重构成VUE的时候,有段代码是这样的 一直能打印出pics的值,...以上这篇vue 解决数组赋值无法渲染在页面的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。

    ORACLE数组使用方法

    ORACLE 数组使用方法 Oracle 数组是一种复杂的数据类型,可以存储多个元素,数组可以分为固定数组和可变数组两种类型。在 Oracle 中,数组可以用来存储大量的数据,并且可以通过索引来访问数组中的元素。 固定数组...

    读取二维数组所有数据_labview读取数组_

    在LabVIEW编程环境中,二维数组是一种常见的数据结构,用于存储多行多列的数据。本教程将深入探讨如何在LabVIEW中有效地读取二维数组的所有数据,这对于数据分析、处理和可视化至关重要。 首先,让我们理解二维数组...

    Javascript数组及其操作

    这些方法可以帮助开发者更方便地操作数组,实现各种数据处理和计算任务。 多维数组 Javascript 也支持多维数组,例如: `var myArray = new Array();` `for (var i = 0; i ; i++) {` ` myArray[i] = new Array();...

    LabVIEW创建一维数组

    一维数组是基本的数组,多维数组是在一维数组的基础上创建的。一维数组的创建过程如下。  (1)创建数组框架。在前面板窗口控件选板中选择控件“新式→数组、矩阵与簇→数组,置于前面板窗口的空白处,如图1所示。...

    易语言文本到数组

    这个"易语言文本到数组"的源码提供了一个实用的方法,帮助程序员高效地将长文本分解成可操作的数据结构——数组。 文本到数组的操作在很多场景下都很有用,例如读取文件内容、处理用户输入、解析日志或进行数据分析...

Global site tag (gtag.js) - Google Analytics