JavaScript学习笔记整理_setTimeout的应用


Posted in Javascript onSeptember 19, 2016

setTimeou的t应用

var ids = [];
function foo1(i) {
  this.i = i;
  console.log('i = '+i);
  ids[0] = setTimeout((function () {
    foo1(i);
  }),1000);
}
function foo2(j) {
  this.j = j;
  console.log('j = '+j);
  ids[1] = setTimeout((function () {
    foo2(j);
  }),1000);
}
foo1(2);
foo2(3);
clearTimeout(ids[0]);
clearTimeout(ids[1]);

当 setTimeout(f,n) 被调用时,它会返回一个 ID 标识并且计划在将来大约n毫秒后调用f函数。 f函数只会被执行一次(递归执行的话就可以实现每n毫秒执行一次),基于 JavaScript 引擎的计时策略,以及本质上的单线程运行方式,所以其它代码的运行可能会阻塞此线程。 因此没法确保函数会在 setTimeout 指定的时刻被调用。通过在回调函数内部使用 setTimeout 函数来防止阻塞!

JavaScript 是异步的,setTimeout 只会执行回调函数一次,不过 setInterval会每隔 X 毫秒执行函数一次。 但是却不鼓励使用这个函数。当回调函数的执行被阻塞时,setInterval 仍然会发布更多的回调指令。在很小的定时间隔情况下,这会导致回调函数被堆积起来。

setTimeout 和 setInterval 也接受第一个参数为字符串的情况。 这个特性绝对不要使用,因为它在内部使用了隐藏的eval,由于 eval 在这种情况下不是被直接调用,因此传递到 setTimeout 的字符串会自全局作用域中执行,建议不要在调用定时器函数时,为了向回调函数传递参数而使用字符串的形式;当需要向回调函数传递参数时,可以创建一个匿名函数,在函数内执行真实的回调函数;

onscolll,onresize等是非常耗性能,那如果我们换成ajax请求的话,那么就会缩放一次窗口会连续触发多次ajax请求,下面我们试着使用函数节流的操作试试一下;当然加个settimeout()的定时器就好了,

第一种封装方法

var count = 0;
function oCount() {
  count++;
  console.log(count);
}
window.onresize = function () {
  delayFun(oCount)
};

function delayFun(method, thisArg) {
  clearTimeout(method.props);
  method.props = setTimeout(function () {
    method.call(thisArg)
  }, 200)
}

第二种封装方法

构造一个闭包,使用闭包的方式形成一个私有的作用域来存放定时器timer, timer是通过传参数的形式引入的。

var count = 0;
function oCount() {
  count++;
  console.log(count);
}
var funs= delayFun(oCount,100);
window.onresize = function () {
  funs()
};

function delayFun(func, wait) {
  var timer = null;
  return function () {
    var context = this,
      args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      func.apply(context, args);
    }, wait)
  };
}

对第二种方法优化一下,性能会更好

这里返回一个函数,如果它被不间断地调用,它将不会得到执行。该函数在停止调用 N 毫秒后,再次调用它才会得到执行。如果有传递 ‘immediate' 参数,会马上将函数安排到执行队列中,而不会延迟。

function delayFun (func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

// 用法
var myEfficientFn = delayFun (function() {
  // 所有繁重的操作
}, 250);
window.addEventListener('resize', myEfficientFn);

函数不允许回调函数在指定时间内执行多于一次。当为一个会频繁触发的事件分配一个回调函数时,该函数显得尤为重要。

setTimeout这么厉害,那么我们是可以在项目中大量使用吗?

我个人是不建议的,在我们业务中,基本上是禁止在业务逻辑中使用setTimeout的,因为我所看到的很多使用方式都是一些问题不好解决,setTimeout作为一个hack的方式。

例如,当一个实例还没有初始化的前,我们就使用这个实例,错误的解决办法是使用实例时加个setTimeout,确保实例先初始化。

为什么错误?这里其实就是使用hack的手段

第一是埋下了坑,打乱模块的生命周期

第二是出现问题时,setTimeout其实是很难调试的。

我认为正确的使用方式是,看看生命周期(可参考《关于软件的生命周期 》),把实例化提到使用前执行

以上就是小编为大家带来的JavaScript学习笔记整理_setTimeout的应用的全部内容了,希望对大家有所帮助,多多支持三水点靠木~

Javascript 相关文章推荐
jQuery 页面 Mask实现代码
Jan 09 Javascript
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
javascript Array.prototype.slice使用说明
Oct 11 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
js中unicode转码方法详解
Oct 09 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
原生js实现放大镜组件
Jan 22 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 #Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 #Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 #Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 #Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 #Javascript
js中用cssText设置css样式的简单方法
Sep 19 #Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 #Javascript
You might like
phpstrom使用xdebug配置方法
2013/12/17 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
Python正则表达式经典入门教程
2017/05/22 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
Python ORM编程基础示例
2020/02/02 Python
pytorch masked_fill报错的解决
2020/02/18 Python
python selenium操作cookie的实现
2020/03/18 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
如何利用python生成MD5并去重
2020/12/07 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
工程现场管理求职自荐信
2013/10/02 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
朋友离别感言
2015/08/04 职场文书
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
Vue vee-validate插件的简单使用
2021/06/22 Vue.js