JS学习-setTimeout()
setTimeout()
超时限制-节流
/* interval(),在setInterval()时间间隔到期后调用。
* timeout()setTimeout()计时器到期后调用。
* run(),在程序启动时调用。
* logline()在间隔和计时器到期时称为,它在出现节流时显示最近的间隔和当前的间隔以及指示符。
**/
var to_timer = 0; // duration is zero milliseconds
var interval_timer = 0; // expires immediately
var cleanup_timer = 0; // fires at end of run
var last = 0; // last millisecond recorded
var duration = 15; // run duration in milliseconds
var lineno = 0; // current output line number
function interval() {
logline(new Date().getMilliseconds());
}
function timeout() {
logline(new Date().getMilliseconds());
interval();
to_timer = setTimeout(timeout, 0);
}
function run() {
interval_timer = setInterval(interval, 0);
to_timer = setTimeout(timeout, 0);
cleanup_timer = setInterval(cleanup, duration);
last = 0;
lineno = 0;
document.getElementById("log").innerHTML = "";
document.getElementById("log").innerHTML = "line last current";
}
function logline(msec) {
// msec can't wrap: run duration > 1 second
var c = "";
if ((last != 0) && (last > msec - 1 /* variation */)) {
c = "Throttled";
}
document.getElementById("log").innerHTML += "<pre>" + pad(lineno++, 2) + " " + pad(last, 3) + " " + msec + " " + c;
last = msec;
}
function cleanup() {
clearTimeout(to_timer);
clearInterval(interval_timer)
}
function pad(num, count) {
return num.toString().padStart(count, '0')
}
<p>Live Example</p>
<button onclick="run();">Run</button>
<div id="log"></div>
polyfill
将一个或多个参数传递给回调函数,但又在不支持使用setTimeout()或setInterval()(例如Internet Explorer 9及以下版本)发送其他参数的浏览器中运行,则 可以添加此polyfill来启用HTML5标准参数传递功能。
/*\
|*|
|*| Polyfill which enables the passage of arbitrary arguments to the
|*| callback functions of JavaScript timers (HTML5 standard syntax).
|*|
|*| https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
|*|
|*| Syntax:
|*| var timeoutID = window.setTimeout(func, delay[, arg1, arg2, ...]);
|*| var timeoutID = window.setTimeout(code, delay);
|*| var intervalID = window.setInterval(func, delay[, arg1, arg2, ...]);
|*| var intervalID = window.setInterval(code, delay);
|*|
\*/
(function() {
setTimeout(function(arg1) {
if (arg1 === 'test') {
// feature test is passed, no need for polyfill
return;
}
var __nativeST__ = window.setTimeout;
window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
var aArgs = Array.prototype.slice.call(arguments, 2);
return __nativeST__(vCallback instanceof Function ? function() {
vCallback.apply(null, aArgs);
} : vCallback, nDelay);
};
}, 0, 'test');
var interval = setInterval(function(arg1) {
clearInterval(interval);
if (arg1 === 'test') {
// feature test is passed, no need for polyfill
return;
}
var __nativeSI__ = window.setInterval;
window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
var aArgs = Array.prototype.slice.call(arguments, 2);
return __nativeSI__(vCallback instanceof Function ? function() {
vCallback.apply(null, aArgs);
} : vCallback, nDelay);
};
}, 0, 'test');
}())
兼容IE9
- js页面注释
/*@cc_on
// conditional IE < 9 only fix
@if (@_jscript_version <= 9)
(function(f){
window.setTimeout = f(window.setTimeout);
window.setInterval = f(window.setInterval);
})(function(f){
return function(c,t){
var a=[].slice.call(arguments,2);
return f(function(){
c instanceof Function ? c.apply(this,a) : eval(c)
},t)
}
});
@end
@*/
- html页面注释
<!--[if lte IE 9]>
<script>
(function(f){
window.setTimeout=f(window.setTimeout);
window.setInterval=f(window.setInterval);
})(function(f){
return function(c,t){
var a=[].slice.call(arguments,2);
return f(function(){
c instanceof Function ? c.apply(this,a) : eval(c)
},t)
}
});
</script>
<![endif]-->
this指向
当您将方法传递给setTimeout()(或其他任何函数)时,将使用this可能与您期望的值不同的值来调用该方法。
myArray = ['zero', 'one', 'two'];
myArray.myMethod = function (sProperty) {
console.log(arguments.length > 0 ? this[sProperty] : this);
};
setTimeout(myArray.myMethod, 1.0*1000); // [object Window]
setTimeout(myArray.myMethod, 1.5*1000, '1');
// ERR:Blocked a frame with origin "https://developer.mozilla.org" from accessing a cross-origin frame. at myArray.myMethod
- 匿名函数
setTimeout(function(){
myArray.myMethod('1')
}, 2.5*1000);
- 箭头函数
setTimeout(() => {
myArray.myMethod('1')
}, 2.5*1000);
- bind
setTimeout(myArray.myMethod.bind(myArray), 1.5*1000, '1');
timeOut延时
// 直到调用的线程setTimeout()终止,函数或代码段才能执行
function foo() {
console.log('foo has been called');
}
setTimeout(foo, 0);
console.log('After setTimeout');
After setTimeout
foo has been called
最大timeOut值
包括Internet Explorer,Chrome,Safari和Firefox在内的浏览器在内部将延迟存储为32位带符号整数。当使用大于2,147,483,647 ms(约24.8天)的延迟时,这会导致整数溢出,从而导致超时立即执行。
JS学习-setTimeout()的更多相关文章
- 【Knockout.js 学习体验之旅】(1)ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- javascript的setTimeout()用法总结,js的setTimeout()方法
引子 js的setTimeout方法用处比较多,通常用在页面刷新了.延迟执行了等等.但是很多javascript新手对setTimeout的用法还是不是很了解.虽然我学习和应用javascript已经 ...
- Node.js学习之TCP/IP数据通讯
Node.js学习之TCP/IP数据通讯 1.使用net模块实现基于TCP的数据通讯 提供了一个net模块,专用于实现TCP服务器与TCP客户端之间的通信 1.1创建TCP服务器 在Node.js利用 ...
- 【转】JS中setTimeout和setInterval的最大延时值详解
前言 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.而这篇文中主要给大家介绍的是关于JS中setTi ...
- vue.js学习之better-scroll封装的轮播图初始化失败
vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- js学习之变量、作用域和内存问题
js学习之变量.作用域和内存问题 标签(空格分隔): javascript 变量 1.基本类型和引用类型: 基本类型值:Undefined, Null, Boolean, Number, String ...
- 【Knockout.js 学习体验之旅】(3)模板绑定
本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- 【Knockout.js 学习体验之旅】(2)花式捆绑
本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- js学习篇1--数组
javascript的数组可以包含各种类型的数据. 1. 数组的长度 ,直接用 length 属性; var arr=[1,2,3]; arr.length; js中,直接给数组的length赋值是会 ...
随机推荐
- 配置python库源为清华源
目录 Windows Ubuntu pip较低版本 pip较高版本 Windows %HOMEPATH%/pip/pip.ini [global] index-url = https://pypi.t ...
- node 版本管理器 nvs
node 总是在不断的升级,以前老项目在运行时可能会报错 我遇到了一个 PostCSS received undefined instead of CSS string 查了下可能是node-sass ...
- csdn 复制
$("#content_views pre").css("user-select","text"); $("#content_vi ...
- linux安装oracle客户端
下载客户端软件 客户端下载地址 链接:https://pan.baidu.com/s/1StXjSjQ_6wRuwj4tewRlaA 提取码:8ynu sqlldr工具 链接:https://pan. ...
- Account Manager privacy agreement
Account Manager privacy agreement [Account Manager] (hereinafter referred to as "we") )We ...
- Linux 第九章( 网卡配置,双网卡绑定,密钥,管理远程会话 )
/etc/hosts.allow 允许 //默认是先匹配允许在匹配拒绝 /etc/hosts.deny 拒绝 service iptables save //保存iptables配置 ...
- PyQt5模块说明
pyqt5的类别分为几个模块,包括以下: QtCoreQtGuiQtWidgetsQtMultimediaQtBluetoothQtNetworkQtPositioningEnginioQtWebSo ...
- springmvc的Interceptor拦截器和servlet的filter过滤器
springmvc的Interceptor拦截器和servlet的filter过滤器 1.springmvc的Interceptor拦截器和servlet的filter过滤器springboot实现方 ...
- Python学习笔记(三)数据类型转换
一.输入输出函数 1.input() 输入函数,内置函数,用来获取用户输入数据,返回值为字符串 运行到此函数会阻塞或暂停程序 示例: 1 str_data = input('请输入数据:') 2 st ...
- uni-app初使用
关于样式 rpx(responsive pixel): 可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = ...