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 ...

随机推荐

取数据的前N行
用awk中csv文件中取前1000行出来,代码虽少,很容易出错 BEGIN{ FS=","; OFS=","; i=; } { i++; )exit; prin ...
vmware-question
1.网卡修改序号ip link set eth3 name eth02.解决克隆虚拟机后网卡设备无法识别启动问题的方法******************************/etc/udev/r ...
C语言宏定义时#(井号)和##(双井号)的用法
C语言中如何使用宏C(和C++)中的宏(Macro)属于编译器预处理的范畴,属于编译期概念(而非运行期概念).下面对常遇到的宏的使用问题做了简单总结. 关于#和## 在C语言的宏中,#的功能是将其后面 ...
easyui datagrid中datetime字段的显示和增删改查问题
datagrid中datetime字段的异常显示: 使用过easyui datagrid的应该都知道,如果数据库中的字段是datetime类型,绑定在datagrid显式的时候会不正常显示,一般需要借 ...
WCF 定制自己的签名验证逻辑
关键点: 1. 保证在客户端设置签名. client.ClientCredentials.ClientCertificate.SetCertificate(StoreLocation.CurrentU ...
用Javascript主动更行URL
参考---ttp://www.oschina.net/translate/manipulating-url-using-javascript-without-freshing-the-page var ...
C++中string，wstring，CString的基本概念和用法
一.概念 string和CString均是字符串模板类,string为标准模板类(STL)定义的字符串类,已经纳入C++标准之中.wstring是操作宽字符串的类.C++标准程序库对于string的设 ...
Java GUI学习笔记之初识AWT和Swing
Frame f = new Frame(); //获取显示器的尺寸 Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize() ...
uniq 重复行统计
uniq 命令文字 uniq 是LINUX命令用途报告或删除文件中重复的行. 语法 uniq [ -c | -d | -u ] [ -f Fields ] [ -s Characters ] ...
QListWidget
1.失去焦点背景颜色,代码设置全选的时候,背景会是白色,需要设置失去焦点背景颜色.(设置焦点,会出现白转化成设置背景色,效果不好) QPalette p; p.setColor(QPalette::I ...

js自定义延迟执行函数

js自定义延迟执行函数的更多相关文章

随机推荐

热门专题