AJax技术

Javascript依赖注入学习笔记(4)

字号+ 作者:H5之家 来源:H5之家 2016-03-23 11:00 我要评论( )

script x=0 function myName(){ x=x+1 document.fm2.one.value=x; setTimeout(myName(),1000); } /script 浏览网页时当你点击开始计时,文本框就会执行js 效果图: 2.clearTimeout() 如果我们要使用这个方法,就要

<script>
   x=0
  function myName(){
    x=x+1
    document.fm2.one.value=x;
    setTimeout("myName()",1000);
  }
</script>

浏览网页时当你点击开始计时,文本框就会执行js

效果图:

2.clearTimeout()
如果我们要使用这个方法,就要在设定setTimeout()时,给它一个名称,这个名称叫TimeoutID,当你想停止计时操作时就用这个。这个可以自定义的。
语法:clearTimeout(TimeoutID)
那么接下来我们结合上面的例子补充几句:


<form name="fm2">
<input type="text" name="one" value="" size=10 />
<input type="button" value="开始计时" onclick="myName()"/>
<input type="button" value="停止计时" onclick="clearTimeout(master)"/>
<!-- 这里的master指的是TimeoutID -->
</form>

js部分:


<script>
   x=0
  function myName(){
    x=x+1
    document.fm2.one.value=x;
    master=setTimeout("myName()",1000);//我给setTimeout起名为master不用timeoutID表示
  }
</script>

如图所示我添加了一个停止计时按钮,与之对应添加了一个点击事件,clearTimeout(master)起到了停止计时的功能。

效果图:

3.小结:前端菜鸟的挨踢学习之路,希望以上的学习笔记对前端苗苗们有所帮助,在使用大神们封装好的jquery库同时,可以自己学习原生js,这样才能帮助我们更好的理解代码,使用代码,也能提升自己的思维水平,fighting~~~

没有了

Promise js是非常的不错了它是一个异步编程的js了,如果我们没有使用过Promise会觉得这个不怎么样,使用之后你会发现Promise非常的好用。

使用Promise是极好的,它是如此有用以至于我觉得应该好好研究一下Promise,甚至是实现一个简易的版本。实现之前,我们先来看看Promise的用途:

使用Promise
callback hell
Promise的第一个用途是能够很好地解决回调黑洞的问题,假设要实现一个用户展示的任务,这个任务分为三步:

获取用户信息
获取用户图像
弹窗提示
不使用Promise,我们的实现可能是这样子:

getUserInfo(id, function (info) { 
  getUserImage(info.img, function () {
    showTip();
  })
})
这里只是三步,如果有更长串的任务时,我们就会陷入到回调黑洞之中,为了解决这个问题,我们就可以使用Promise来处理这一长串任务,使用Promise的版本是这样子的:

// getUserInfo返回promise
getUserInfo(id) 
  .then(getUserImage)
  .then(showTip)
  .catch(function (e) {
     console.log(e);
  });
原来向右发展的代码,开始向下发展,这样也更适合编程习惯,如果要让我们的代码更加健壮,我们就需要在每一步来处理错误信息,使用promise这后,我们只需要在最后的catch中做善后处理。

并发
假如我们要显示某一个页的10条记录,但是我们只有一个通过id获取记录的接口,这样我们就需要发送10个请求,并且所有请求都完成之后再将记录全部添加到页面之中,Promise在这个场景下使用是特别合适的。

代码可能是这样子:

// ids要获取信息的所有记录id
// getRecordById获取记录的接口,返回promise
Promise.all(ids.map(getRecordById)) 
  .then(showRecords)
  .catch(function (e) {
     console.log(e);
  });
这就是Promise的一些简单的用途,当然令人兴奋的是Promise已经是ES6的标准,而且目前很多浏览器已经原生支持Promise了。对于那些无法使用Promise的浏览器,我们就只能自己去实现了,下面就来看看Promise的简单实现吧。

实现
warm up
先来盗用一张MDN的图,先来热热身,看看Promise的状态迁移: promise Promise有三种状态:

pending:初始状态, 非 fulfilled 或 rejected
fulfilled: 成功的操作
rejected: 失败的操作
我们可以看出新建的Promise是pending状态,fulfill之后就会执行调用then的回调函数了,倘若reject了就会调用catch来进行异常处理了,并且无论是调用then还是catch都会返回新的promise,这就是为什么promise可以链式调用了。

接着,我们来研究一下规范是怎么描述 promise的。这里只抽取核心部分,边界问题不考虑。

构造函数:Promise ( executor )
检查参数:例如executor是不是函数啊
初始化:[[State]]=pending,[[FulfillReactions]]=[],[[RejectReactions]]=[]
创建resolve对象:{[[Resolve]]: resolve, [[Reject]]: reject}
执行executor:executor(resolve, reject)
因此构造函数里面传入的excuter是立即被执行的。FulfillReactions存储着promise执行成功时要做的操作,RejectReactions存储着promise是要执行的操作。

function Promise(resolver) { 
  this._id = counter++;
  this._state = PENDING;
  this._result = undefined;
  this._subscribers = [];

  var promise = this;

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Ajax+smarty技术实现无刷新分页

    Ajax+smarty技术实现无刷新分页

    2016-03-15 15:00

  • JavaScript学习总结之JS、AJAX应用

    JavaScript学习总结之JS、AJAX应用

    2016-02-06 15:02

  • 学习JavaScript设计模式之代理模式

    学习JavaScript设计模式之代理模式

    2016-01-25 17:02

  • javascript、jquery、AJAX总结

    javascript、jquery、AJAX总结

    2016-01-25 17:00

网友点评
n