首页 > 语言 > JavaScript > 正文

JavaScript学习笔记整理_setTimeout的应用

2024-05-06 15:09:39
字体:
来源:转载
供稿:网友

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' 参数,会马上将函数安排到执行队列中,而不会延迟。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选