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赋值是会 ...
随机推荐
- springboot中实现逆向工程
如果这篇文章能给你带来帮助 不胜荣幸,如果有不同的意见也欢迎批评指正,废话不多说直接上代码.(参考文档:https://www.cnblogs.com/kibana/p/8930248.html) 第 ...
- Unity3D调用Android功能与组件(10.1):应用自启动
前言 我在Unity3D调用Android功能与组件(十)-BroadcastReceiver中介绍了如何使用Unity接入广播. 然而很多没有做过Android的小伙伴却表示 [这是神马玩意儿?干啥 ...
- 杭电oj Lowest Common Multiple Plus
Problem Description 求n个数的最小公倍数. Input 输入包含多个测试实例,每个测试实例的开始是一个正整数n,然后是n个正整数. Output 为每组测试数据输出它们的最 ...
- 只要引用这个js就会页面加载完毕自动弹出提示框
IE浏览器不支持ES6语法, 此代码为翻译并修改过的,使用的bable网站翻译 (function (win) { // 生成遮罩和弹出层,返回弹出层DOM对象 var createMsgBox = ...
- linux中安装doker
1.更新yum为最新的 yum -y update 2.卸载旧版的docker sudo yum remove -y docker* 3.安装需要的软件包 yum install -y yum-uti ...
- React 安装 Sass 错误问题; node-sass 安装运行成功 yarn add sass node-sass@npm:sass
正常安装是: yarn add node-sass 直接安装出现报错 例如: Node Sass does not yet support your current environment: Wind ...
- win10家庭版升级为专业版
1.选择此电脑点击属性 2.点击更改产品密匙 3.输入产品密匙 4N7JM-CV98F-WY9XX-9D8CF-369TT下一步等待升级重启即可.
- shell_Day03
嗯,这是第二天,吧 wc word count 统计文本文件中的字符个数 -l 查看行数 -w 查看字符个数 -c 查看文件大小(字节) cut 用来分割文件内容 -d 指定分隔符,delimit ...
- [Swift]创建桥接文件,Swift使用MJRefresh刷新插件
刚开始玩Swift,想做个下拉刷新的功能,发现在OC中用得比较多的第三方插件是MJRefresh.查了一下,在Swift中使用OC的插件要通过桥接文件,然后又百度一下怎么创建桥接文件,发现很多都是老司 ...
- 2023-03-03 js map 双重嵌套
恩..其实也没啥要记录的,记住关键一点就是必须要有return,不管是几重,比如: arr.map((item, index) => { return ( item.ar ...