js自定义延迟执行函数
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.test div{ width: 500px;height: 500px;}
#aa{ height: auto;}
</style>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
(function ($, window) {
var $window = $(window);
$.fn.lazyevent = function (options) {
var elements = this;
var settings = {
threshold: 0,
event: "scroll",
container: window,
skip_invisible: true,
fn: null,
data: null
};
function update() {
elements.each(function () {
var $this = $(this);
if (settings.skip_invisible && !$this.is(":visible")) {
return;
}
if (inviewport(this, settings)) {
$this.trigger("fire");
}
}); }
if (options) {
$.extend(settings, options);
}
var $container = (settings.container === undefined || settings.container === window) ? $window : $(settings.container); if (0 === settings.event.indexOf("scroll")) {
$container.bind(settings.event, function (event) { return update(); });
}
this.each(function () {
var self = this;
var $self = $(self);
self.fired = false;
$self.one("fire", function () {
if (!this.fired) {
if (settings.fn) {
settings.fn.call(self, settings.data);
}
self.fired = true;
var temp = $.grep(elements, function (element) { return !element.fired; });
elements = $(temp);
}
}); if (0 !== settings.event.indexOf("scroll")) {
$self.bind(settings.event, function (event) {
if (!self.fired) {
$self.trigger("fire");
}
});
}
}); $window.bind("resize", function (event) {
update();
}); var belowthefold = function (element, settings) {
var fold; if (settings.container === undefined || settings.container === window) {
fold = $window.height() + $window.scrollTop();
} else {
fold = $container.offset().top + $container.height();
}
return fold <= $(element).offset().top - settings.threshold;
}; var rightoffold = function (element, settings) {
var fold; if (settings.container === undefined || settings.container === window) {
fold = $window.width() + $window.scrollLeft();
} else {
fold = $container.offset().left + $container.width();
} return fold <= $(element).offset().left - settings.threshold;
};
var abovethetop = function (element, settings) {
var fold; if (settings.container === undefined || settings.container === window) {
fold = $window.scrollTop();
} else {
fold = $container.offset().top;
} return fold >= $(element).offset().top + settings.threshold + $(element).height();
}; var leftofbegin = function (element, settings) {
var fold; if (settings.container === undefined || settings.container === window) {
fold = $window.scrollLeft();
} else {
fold = $container.offset().left;
} return fold >= $(element).offset().left + settings.threshold + $(element).width();
};
var inviewport = function (element, settings) {
return !abovethetop(element, settings) && !leftofbegin(element, settings) &&
!belowthefold(element, settings) && !rightoffold(element, settings);
};
update();
return this;
}; })(jQuery, window);
</script>
<script type="text/javascript">
$(function () {
$("#aa").lazyevent({
data: "hello word",
fn: function (data) {
var html = $(this).html();
alert(data + ":" + html);
}
});
});
</script> </head>
<body>
<div style="height: 200px">
</div>
<div class="test">
<div style="background-color: Green" >Green</div>
<div style="background-color: Lime">Lime</div>
<div style="background-color: Maroon; display:none">Maroon</div>
<div style="background-color: Olive">Olive</div>
<div style="background-color: Red; display: none">Red</div>
<div style="background-color: ButtonFace">ButtonFace</div>
<div style="background-color: Aqua">Aqua</div>
<div style="background-color: AppWorkspace; height:auto;" id="aa" >AppWorkspace</div>
</div>
</body>
</html>
压缩后的js代码：
<script type="text/javascript">
(function (a, c) { var b = a(c); a.fn.lazyevent = function (j) { var g = this; var l = { threshold: 0, event: "scroll", container: c, skip_invisible: true, fn: null, data: null }; function m() { var n = 0; g.each(function () { var o = a(this); if (l.skip_invisible && !o.is(":visible")) { return } if (h(this, l)) { o.trigger("fire") } }) } if (j) { a.extend(l, j) } var d = (l.container === undefined || l.container === c) ? b : a(l.container); if (0 === l.event.indexOf("scroll")) { d.bind(l.event, function (n) { return m() }) } this.each(function () { var o = this; var n = a(o); o.fired = false; n.one("fire", function () { if (!this.fired) { if (l.fn) { l.fn.call(o, l.data) } o.fired = true; var p = a.grep(g, function (q) { return !q.fired }); g = a(p) } }); if (0 !== l.event.indexOf("scroll")) { n.bind(l.event, function (p) { if (!o.fired) { n.trigger("fire") } }) } }); b.bind("resize", function (n) { m() }); var f = function (n, p) { var o; if (p.container === undefined || p.container === c) { o = b.height() + b.scrollTop() } else { o = d.offset().top + d.height() } return o <= a(n).offset().top - p.threshold }; var k = function (n, p) { var o; if (p.container === undefined || p.container === c) { o = b.width() + b.scrollLeft() } else { o = d.offset().left + d.width() } return o <= a(n).offset().left - p.threshold }; var e = function (n, p) { var o; if (p.container === undefined || p.container === c) { o = b.scrollTop() } else { o = d.offset().top } return o >= a(n).offset().top + p.threshold + a(n).height() }; var i = function (n, p) { var o; if (p.container === undefined || p.container === c) { o = b.scrollLeft() } else { o = d.offset().left } return o >= a(n).offset().left + p.threshold + a(n).width() }; var h = function (n, o) { return !e(n, o) && !i(n, o) && !f(n, o) && !k(n, o) }; m(); return this } })(jQuery, window);
</script>
js自定义延迟执行函数的更多相关文章
- JS页面延迟执行一些方法(整理)
一般在JS页面延迟执行一些方法.可以使用以下的方法 jQuery.delay()方法简介 http://shawphy.com/2010/11/jquery-delay.html jQuery中que ...
- JS 的立即执行函数
JS 的立即执行函数 本文写于 2019 年 12 月 7 日 其实 ES6 之后有了之后,很多之前的用法都没必要了,立即执行函数就是其一. 今天看到一道面试题: 请「用自己的语言」简述 立即执行函数 ...
- js匿名自执行函数中闭包的高级使用(---------------------------******-----------------------------)
先看看最常见的一个问题: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- JS中立即执行函数的理解
1.匿名函数不能单独定义,必须进行赋值操作或者立即执行,否则会被JS引擎定义为语法错误 function(){alert(dada);} VM229:1 Uncaught SyntaxError: U ...
- IOS 关于取消延迟执行函数的种种。performSelector与cancelPreviousPerformRequestsWithTarget
本文非本人撰写 @interface NSObject (NSDelayedPerforming) - (void)performSelector:(SEL)aSelector withObj ...
- js中立即执行函数写法理解
在理解了一些函数基本概念后,回头看看( function(){…} )()和( function (){…} () )这两种立即执行函数的写法,最初我以为是一个括号包裹匿名函数, 并后面加个括号立即调 ...
- js匿名自执行函数
匿名自执行函数:没有方法名的函数闭包:闭包是指有权访问另一个函数作用域变量的函数: 通过一个实例来解释: 从网上找到了一个案例,使用了for循环.匿名自执行函数.setTimeout. 案例1: va ...
- js的立即执行函数
立即执行函数:常用于第三方库,好处在于隔离作用域,任何一个第三方库都会存在大量的变量和函数,为了避免变量污染(命名冲突),一般想到的方法就是使用立即执行函数.jQuery就是使用的立即执行函数. 函数 ...
- 【原】js离开页面执行函数 onbeforeunload与onunload事件
在最近的项目中,需要做到一个时间,就是用户离开页面的时候,我需要缓存页面其中一部分的内容,但是我不需要用户刷新的时候也缓存,我只希望在我用户离开的时候 执行这个函数.百度之,有onbeforeunlo ...
随机推荐
- 剑指Offer 找出字符串中第一个只出现一次的字符
题目描述 找出字符串中第一个只出现一次的字符 如果无此字符 请输出'.' 输入描述: 输入一串字符,由小写字母组成 输出描述: 输出一个字符 输入例子: asdfasdfo 输出例子: o 思路:数组 ...
- BZOJ 3907: 网格
Description 求不跨过直线 \(y=x\) ,到达 \((n,m)\) 的方案数. Sol 组合数学+高精度. 这个推导过程跟 \(Catalan\) 数是一样的. 答案就是 \(C^{n+ ...
- 6 HandlerDescriptor 处理程序描述类——Live555源码阅读(一)基本组件类
这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. 本文由乌合之众 lym瞎编,欢迎转载 http://www.cnblogs.com/oloroso ...
- MySQL Errcode 13 with SELECT INTO OUTFILE Can't create/write to file
这是由于权限问题导致的,最主要的问题是搞清楚权限是如何设置的.Ubuntu 使用 AppArmor 作为程序权限限制, Fedora 使用 selinux 作为程序权限限制. 在linux中,以往的权 ...
- 4.9---二叉树路径和（CC150）
//注意,1,要判断null:2,要注意ArrayList直接复制会被一起改变.要通过new的方式来操作.public class Solution { public static void main ...
- 关于Jquery学习的几点反思
1.应用的API插件时,先看说明文档,仔细看,多花点时间也没关系. 2.写出你要完成工作的几个步骤,细化你的工作.保证每一步结果都是正确(特别是在用你不会的东西的时候),这样看起来是在浪费时间,但是最 ...
- SqlServer coalesce函数
SqlServer数据库中coalesce函数用法:在SqlServer2005中有了新的函数,它非常的实用,它就是coalesce函数,此函数可以返回参数中的第一个非空表达式,当你要在N个字段中选取 ...
- servlet 和filter 的生命周期说明
servlet : 当客户端第一次访问servlet的时候,服务器就会创建servlet实例,servlet 就会执行init方法,每次请求,服务器会开一个新的线程访问servlet中得service ...
- ios CoreData NSManagedObject 生命周期
用同样的检索条件从context检索出的对象是一个????所以 在主页的3个brand没法释放,在仅仅处理brand的时候???? 和 多个 context无关 我重写了NSManagedObject ...
- 2106 Problem F Shuffling Along 中石油-未提交-->已提交
题目描述 Most of you have played card games (and if you haven’t, why not???) in which the deck of cards ...