HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="generator_test.js"></script>
<meta charset="UTF-8">
<style type="text/css">
progress {
width: 160px;
border: 1px solid #0064B4;
background-color: #e6e6e6;
color: #0064B4;
}
</style>
<title>code3_Generator函数</title>
</head>
<body>
<progress max="100" value="5"></progress>
<div id="data">sdf</div>
<!--<input type="button" name="button" onclick="ajax()" value="ajax请求"/>-->
<input type="button" name="button" onclick="myAjax()" value="newAjax请求"/>
</body>
</html>JS
/**
* Created by liuml on 2017/4/20.
*/
/**
* 下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。
* 也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield语句（或return语句）为止。
*/
//grenerator函数
//区别
//1.返回值function*
//2.yield
function* func() {
yield "step1";
console.log("step1");
yield "step2";
console.log("step2");
// return "result";
}
let state = func();
state.next();
state.next();
state.next();
console.log(state.next());
// 案例 :
//功能 显示进度条 -> 请求数据 ->获取数据成功 隐藏进度条
//显示进度条
function showLoadingProgress() {
//
let progress = document.getElementsByTagName("progress")[0];
//定时器
let interval = setInterval(function () {
progress.value += 10;
if (progress.style.display === "none") {
clearInterval(interval); //取消定时器
}
/*if (progress.value == 100) {//用这种方式的话就不用隐藏了 这里进度条满了后自动给隐藏
progress.style.display = "none";
clearInterval(interval);
}*/
}, 300);
}
//请求数据
function loadUIDataAsynch(callback) {
//模拟网络延时
setTimeout(function () {
//拿到数据
let dataNode = document.getElementById("data");
console.log(dataNode);
console.log(dataNode.innerHTML);
dataNode.innerHTML = "模拟从服务器获得的数据.";
//隐藏进度条;
callback();
}, 3000);
}
//隐藏进度条
function hideLoadingProgress() {
var progress = document.getElementsByTagName("progress")[0];
progress.style.display = "none";
}
//
function loadUiMain() {
showLoadingProgress();
loadUIDataAsynch(hideLoadingProgress);
}
//当页面加载完成之后 开始操作
window.onload = loadUiMain;
//使用 Generator 函数
//显示进度条
function showLoadingProgress() {
//不断刷新进度条
//DOM
var progress = document.getElementsByTagName("progress")[0];
//定时器，每隔400毫秒，进度累加
var interval = setInterval(function () {
progress.value += 10;
if (progress.style.display === "none") {
clearInterval(interval); //取消定时器
}
}, 400);
}
//获取数据
function loadUIDataAsynch() {
//模拟网络延时
setTimeout(function () {
//拿到数据
let dataNode = document.getElementById("data");
console.log(dataNode);
console.log(dataNode.innerHTML);
dataNode.innerHTML = "模拟从服务器获得的数据.";
//隐藏进度条
loader.next();
}, 3000);
}
//请求数据
function hideLoadingProgress() {
var progress = document.getElementsByTagName("progress")[0];
progress.style.display = "none";
}
//异步操作的同步化表达
function* loadUi() {
//显示对话框
showLoadingProgress();
//加载数据
yield loadUIDataAsynch();
//隐藏对话框
hideLoadingProgress();
}
var loader;
window.onload = function () {
loader = loadUi();
loader.next();
}
//next传参
//yield句本身没有返回值，或者说总是返回undefined
//next方法可以带一个参数，该参数就会被当作上一个yield语句的返回值
/**
* Generator 函数从暂停状态到恢复运行，它的上下文状态（context）是不变的。通过next方法的参数，
* 就有办法在 Generator 函数开始运行之后，继续向函数体内部注入值。
* 也就是说，可以在 Generator 函数运行的不同阶段，从外部向内部注入不同的值，从而调整函数行为。
*/
function* func2() {
console.log("started");
let r1 = yield;
console.log(r1); //输出yield返回值
let r2 = yield;
console.log(r2);
}
let state = func2();
state.next();
state.next("a");
state.next();
//循环输出，通过传参，随时让循环重新开始
function* func3() {
for (let i = 0; i < 5; i++) {
let reset = yield i;
console.log(reset);
if (reset) i = -1;
//console.log(i);
}
}
let state = func3();
console.log(state.next());
console.log(state.next());
//通过next传参，让yield有返回值
console.log(state.next(true));
console.log(state.next());
console.log(state.next());
//按照流程执行
//step1(value1) -> step2(value2) -> step3(value3) -> step4(value4)
function step4(value3, callback) {
var value4 = `step4_${value3}`;
callback(value4);
}
function step3(value2, callback) {
var value3 = `step3_${value2}`;
callback(value3);
}
function step2(value1, callback) {
var value2 = `step2_${value1}`;
callback(value2);
}
function step1(callback) {
var value1 = `step1_start `;
callback(value1);
}
//回调嵌套
step1(function (value1) {
step2(value1, function (value2) {
step3(value2, function (value3) {
step4(value3, function (value4) {
console.log(value4);
});
});
});
});
function step4(value3) {
return `step4_${value3}`;
}
function step3(value2) {
return `step3_${value2}`;
}
function step2(value1) {
return `step2_${value1}`;
}
function step1() {
return `step1_start `;
}
//控制流管理
function* stepFunc() {
let value1;
yield value1 = step1();
let value2;
yield value2 = step2(value1);
let value3;
yield value3 = step3(value2);
let value4;
yield value4 = step4(value3);
console.log(value4);
}
//顺序执行
for (var i of stepFunc());
//Ajax请求网络，json数据
//请求成功：显示数据
//请求失败：抛出异常
//局部刷新8
function ajax() {
console.log("点击了ajax按钮");
url = "test.json";
var request = new XMLHttpRequest();
request.open("GET", url);
request.onreadystatechange = handler;
request.responseType = "json";//响应类型 json
request.setRequestHeader("Accept", "application/json");
request.send();
//回调
function handler() {
if (request.readyState !== 4) {
return;
}
if (this.state == 200) {//请求成功 显示数据
console.log(this.response.message);
} else {
throw new Error(this.statusText);
}
}
}
//
//Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大
//Ajax请求网络，json数据
//请求成功：显示数据
//请求失败：抛出异常
//局部刷新
//Promise对象的三种状态
//Pending（进行中）、Resolved（已完成，又称 Fulfilled）和Rejected（已失败）
function ajax(url) {
var promise = new Promise(function (resolve, reject) {
var request = new XMLHttpRequest();
request.open("GET", url);
request.onreadystatechange = handler;
request.responseType = "json";
request.setRequestHeader("Accept", "application/json");
request.send();
function handler() {
//4完成响应 解析完成
if (this.readyState !== 4) {
return;
}
if (this.state == 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
}
});
return promise;
}
function myAjax() {
console.log(ajax('test.json'));
ajax('test.json').then(
//resolve 成功
function (json) {
console.log(json);
alert(json);
}, function (e) {
//rejedt 失败
console.log(e.message + "失败");
alert(e.message);
}
// json => json.message.log
//reject 失败
)
}
function ajax(url) {
var promise = new Promise(function (resolve, reject) {
var request = new XMLHttpRequest();
request.open("GET", url)
request.onreadystatechange = handler;
request.responseType = "json"; //服务器响应数据的类型 json
request.setRequestHeader("Accept", "application/json");
request.send();
//回调
function handler() {
//4（完成）响应内容解析完成
if (this.readyState !== 4) {
return;
}
if (this.status == 200) {
//请求成功：显示数据
resolve(this.response);
}
else {
reject(new Error(this.statusText));
}
}
});
return promise;
}
//指定resolve状态、reject状态的回调函数
ajax('test.json').then(
//resolve
json => alert(json.message),
//reject，可选的
e => console.log(e.message)
);
还有个json 文件数据 我随便搞的
名字是test.json
{
"repBody": {
"appSignins": [
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 1,
"create_time": 1482217201000,
"last_logintime": 1482197775000,
"remark": "第1天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 2,
"create_time": 1482317353818,
"last_logintime": 1482197775000,
"remark": "连续签到第2天",
"score": 10,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 3,
"create_time": 1482403753819,
"last_logintime": 1482230953818,
"remark": "签到第3天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 4,
"create_time": 1482490153819,
"last_logintime": 1482230953819,
"remark": "签到第4天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 5,
"create_time": 1482576553819,
"last_logintime": 1482230953819,
"remark": "签到第5天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 6,
"create_time": 1482662953820,
"last_logintime": 1482230953819,
"remark": "签到第6天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 7,
"create_time": 1482749353820,
"last_logintime": 1482230953820,
"remark": "连续签到第7天",
"score": 20,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 8,
"create_time": 1482835753821,
"last_logintime": 1482230953820,
"remark": "签到第8天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 9,
"create_time": 1482922153821,
"last_logintime": 1482230953821,
"remark": "签到第9天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 10,
"create_time": 1483008553821,
"last_logintime": 1482230953821,
"remark": "签到第10天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 11,
"create_time": 1483094953822,
"last_logintime": 1482230953821,
"remark": "签到第11天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 12,
"create_time": 1483181353822,
"last_logintime": 1482230953822,
"remark": "签到第12天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 13,
"create_time": 1483267753823,
"last_logintime": 1482230953822,
"remark": "签到第13天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 14,
"create_time": 1483354153823,
"last_logintime": 1482230953823,
"remark": "连续签到第14天",
"score": 50,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 15,
"create_time": 1483440553824,
"last_logintime": 1482230953823,
"remark": "签到第15天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 16,
"create_time": 1483526953824,
"last_logintime": 1482230953824,
"remark": "签到第16天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 17,
"create_time": 1483613353825,
"last_logintime": 1482230953824,
"remark": "签到第17天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 18,
"create_time": 1483699753825,
"last_logintime": 1482230953824,
"remark": "签到第18天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 19,
"create_time": 1483786153825,
"last_logintime": 1482230953825,
"remark": "签到第19天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 20,
"create_time": 1483872553827,
"last_logintime": 1482230953825,
"remark": "签到第20天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 21,
"create_time": 1483958953827,
"last_logintime": 1482230953827,
"remark": "签到第21天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 22,
"create_time": 1484045353828,
"last_logintime": 1482230953827,
"remark": "签到第22天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 23,
"create_time": 1484131753828,
"last_logintime": 1482230953828,
"remark": "签到第23天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 24,
"create_time": 1484218153829,
"last_logintime": 1482230953828,
"remark": "签到第24天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 25,
"create_time": 1484304553829,
"last_logintime": 1482230953829,
"remark": "签到第25天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 26,
"create_time": 1484390953829,
"last_logintime": 1482230953829,
"remark": "签到第26天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 27,
"create_time": 1484477353830,
"last_logintime": 1482230953829,
"remark": "签到第27天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 28,
"create_time": 1484563753830,
"last_logintime": 1482230953830,
"remark": "签到第28天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 29,
"create_time": 1484650153831,
"last_logintime": 1482230953830,
"remark": "签到第29天",
"score": 5,
"user_apptype": "0"
},
{
"id": 41111,
"user_id": 21733,
"user_loginname": "测试内容ph34",
"count": 30,
"create_time": 1484736553831,
"last_logintime": 1482230953831,
"remark": "连续签到第30天",
"score": 100,
"user_apptype": "0"
}
],
"isSigned": false,
"resCode": "1",
"resMsg": "获取数据成功！"
}
}
538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
