JS简单测试循环运行时间的方法


Posted in Javascript onSeptember 04, 2016

本文实例讲述了JS简单测试循环运行时间的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JS 测试循环运行的时间</title>
<script>
  var arr = [];
  var max = 10000000;
  //加载
  window.addEventListener("load", function () {
    setTimeout(function () {
      //初始化arr
      for (var i = 0; i < max; i++) {
        arr[i] = i + 1;
      }
      //显示所有按钮
      document.getElementById("div1").style.display = "block";
      document.getElementById("div2").style.display = "none";
    }, 1);
  });
  //1) 使用 for 循环
  function test1() {
    var d1 = new Date();
    var sum = 0;
    for (var i = 0; i < arr.length; i++) {
      sum += arr[i]
    }
    var d2 = new Date();
    var x = d2 - d1;
    console.log("for计算结果:" + sum + ",用时:" + x);
  }
  //2) 使用 for..in 循环
  function test2() {
    var d1 = new Date();
    var sum = 0;
    for (var i in arr) {
      sum += arr[i]
    }
    var d2 = new Date();
    var x = d2 - d1;
    console.log("for..in计算结果:" + sum + ",用时:" + x);
  }
  //3) 使用 forEach 循环
  function test3() {
    var d1 = new Date();
    var sum = 0;
    arr.forEach(function (n) {
      sum += n;
    })
    var d2 = new Date();
    var x = d2 - d1;
    console.log("forEach计算结果:" + sum + ",用时:" + x);
  }
</script>
</head>
<body>
请按F12查看控制器输出 <br />
<div id="div1" style="display:none;">
  <input type="button" value="使用for循环" onclick="test1();" /> <br />
  <input type="button" value="使用for..in循环" onclick="test2();" /> <br />
  <input type="button" value="使用forEach循环" onclick="test3();" /> <br />
</div>
<div id="div2">
  正在初始化...
</div>
</body>
</html>

效果图:

JS简单测试循环运行时间的方法

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript作用域链使用介绍
Aug 29 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
js+css3实现旋转效果
Jan 20 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 #Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 #Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 #Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 #Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 #Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 #Javascript
浅析$(function) ready和onload 的区别
Sep 03 #Javascript
You might like
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
Python多线程编程简单介绍
2015/04/13 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
详解Python中的元组与逻辑运算符
2015/10/13 Python
Python常用的爬虫技巧总结
2016/03/28 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
python实现随机漫步算法
2018/08/27 Python
python 异或加密字符串的实例
2018/10/14 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
环境工程专业个人求职信
2013/12/05 职场文书
卫生系统先进事迹
2014/05/13 职场文书
节电标语大全
2014/06/23 职场文书
管理标语大全
2014/06/24 职场文书
培训讲师开场白
2015/06/01 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
MySQL分库分表详情
2021/09/25 MySQL