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 相关文章推荐
js 分页全选或反选标识实现代码
Aug 09 Javascript
分页栏的web标准实现
Nov 01 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
javascript操作ul中li的方法
May 14 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
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
Syphon 秘笈
2021/03/03 冲泡冲煮
php 高效率写法 推荐
2010/02/21 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
python实现静态web服务器
2019/09/03 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
给女儿的表扬信
2014/01/18 职场文书
促销活动计划书
2014/05/02 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
诚信考试标语
2014/06/24 职场文书
员工团队活动方案
2014/08/28 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
简爱电影观后感
2015/06/10 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python