文档章节

JavaScript学习笔记(一)

outf-8
 outf-8
发布于 2016/09/08 16:22
字数 305
阅读 14
收藏 1

延时加载这个在Web开发当中最常见的一种了

函数延时加载,图片延时加载……

在JavaScript的学习过程中自己写的函数延时加载,在这里记录一下

写的不好之处希望可以帮我指出,不胜感激(^_^)(^_^)

// 函数延时执行,完美兼容ie、谷歌、火狐等浏览器的各个版本
		function _delay(){
		    
		    function Delay(){
		        this.task = [];
		    }
		    Delay.prototype = {

		        then: function(fn, time){
		            this.task.push({fn: fn, time: time || 0});
		            return this;
		        },

		        run: function(){

		            var
		                _this = this,
		                len   = this.task.length,
		                task  = this.task.shift(),
		                next_task = this.task[0],
		                that;

		            (function(){
		                that = arguments.callee;
		                if (task.time > 0)
		                    task.fn(next_task.fn);
		                next_task = _this.task[0];
		                if (_this.task.length > 0) {
		                    if (task.time <= 0) {
		                        task.fn(that);
		                    }else{
		                        setTimeout(that, task.time);
		                    }
		                    task = _this.task.shift();
		                }
		            }());

		            return this;
		        }
		    }

		    return new Delay();
		}
		/**********************************
		 *******                ***********
		 *******   这是一个案例  **********
		 *******                ***********
		var delay = new _delay();

		delay
			.then(function(next) {
				alert('fn1是不是很郁闷呀');
			}, 2000)
			.then(function(next) {
				alert('不要太郁闷哟');
		        setTimeout(function() {
		            alert('fn2这么延时真的好郁闷哟')
		            next();
		        }, 3000)
		    })
		    .then(function(next) {
		        alert('fn3你可以开心的浏览咯:-D:-D:-D');
		    }, 1000)
		    .run();
		 *********************************/

上面的兼容性好,再来一个ES6的(^_^)(^_^)

//函数延时执行,虽然代码量少但不支持老版本浏览器
		function delayPromise(ms) {
		    return new Promise(function (resolve) {
		        setTimeout(resolve, ms);
		    });
		}
		/**********************************
		 *******                ***********
		 *******   这是一个案例  **********
		 *******                ***********
		 *
		delayPromise(1000).then(function(){
			console.log('1000ms后出现的弹窗,是不是很郁闷呀(*^_^*)(*^_^*)');
		});

		 *********************************/

© 著作权归作者所有

outf-8
粉丝 1
博文 13
码字总数 4396
作品 0
深圳
其他
私信 提问

暂无文章

将key=value转成对象形式

var params = {};testParan.split(',').forEach(item =>{ var tmpArr = item.split('='); Vue.set(params, tmpArr[0].trim(), tmpArr[1].trim());});Vue.set(params, 'sql', sql);......

沉迷代码我爱学习
24分钟前
4
0
什么是分立器件

  分立器件被广泛应用到消费电子、计算机及外设、网络通信,汽车电子、led显示屏等领域。   半导体产业中有两大分支:集成电路和分立器件。   集成电路   集成电路(integrated circ...

仙溪
34分钟前
5
0
kibana rpm安装

https://www.elastic.co/guide/en/kibana/6.2/rpm.html 下载对应的版本wget https://artifacts.elastic.co/downloads/kibana/kibana-6.2.4-x86_64.rpm 安装 rpm -ivh kibana-6.2.4-x86_64......

看的最远的地方
37分钟前
3
0
高防CDN相比较于高防服务器,为何更加稳定?

对于DDoS攻击,那些已经做过网站、平台的人应该知道,DDoS攻击是非常可怕的,因为这种攻击本质上不能防御,或者DDoS攻击只能被减轻,不能完全消除。DDoS,意思是“分布式拒绝服务”。它是一种...

云漫网络Ruan
38分钟前
4
0
线程SuspendThread() ResumeThread()的使用

SuspendThread():挂起线程 If the function succeeds, the return value is the thread's previous suspend count; otherwise, it is (DWORD) -1. ResumeThread():启动线程 If the functio......

rainbowcode
38分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部