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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
js程序中美元符号$是什么
Jun 05 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
jquery默认校验规则整理
Mar 24 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
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
php中常用编辑器推荐
2007/01/02 PHP
php 读取文件乱码问题
2010/02/20 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
一个javascript参数的小问题
2008/03/02 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
js a标签点击事件
2017/03/30 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
Python实现从订阅源下载图片的方法
2015/03/11 Python
Python中functools模块的常用函数解析
2016/06/30 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
python实现用户名密码校验
2020/03/18 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
群胜软件Java笔试题
2012/09/29 面试题
大学四年规划书范文
2013/12/27 职场文书
分家协议书
2014/04/21 职场文书
安全生产月活动总结
2014/05/04 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android