js自定义延迟执行函数

浏览数：26 / 时间：2015年06月09日

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