Jquery防止重复点击,显示加载中.

Posted 2020-11-05 拄杖盲学轻声码

$.LoadEvents("showLoading",$("#tt"),"#902D2D");

$.LoadEvents("hideLoading",$("#tt"));

原生代码：

!(function ($) {
    $.extend({
        "LoadEvents": function (eventType, $parent, loadColor, bgColor, opacity, fn) {
            switch (eventType) {
                case "showLoading": {
                    if($(document.head).find(\'#css_loader\').length == 0){
                        $(document.head).append(\'<link rel="stylesheet" type="text/css" id="css_loader" href="loader.css">\');
                    }
                    var loaderTargets = [];
                    var $body = $(document.body);
                    var _bgColor = \'rgba(238,238,238,0.5)\';
                    var _opacity = 1;
                    var _loadColor = \'#67CF22\';
                    if (typeof(bgColor) != "undefined") {
                        _bgColor = bgColor;
                    }
                    if(typeof(opacity) != "undefined") {
                        _opacity = opacity;
                    }
                    if($parent.find("#events_loader").length == 0){
                        // 可以有多个加载实例，所以需要用loaders管理
                        var $loader = $("<div id=\'events_loader\'></div>").css({
                            background: _bgColor,
                            opacity:_opacity,
                            position: \'absolute\',
                            top: 0,
                            left: 0,
                            width: \'100%\',
                            height: \'100%\'
                        });
                        // loading动画
                        var $icon = $(\'<div class="spinner">\'+
                            \'<div class="rect1"></div>\'+
                            \'<div class="rect2"></div>\'+
                            \'<div class="rect3"></div>\'+
                            \'<div class="rect4"></div>\'+
                            \'<div class="rect5"></div>\'+
                            \'</div>\');
                        if(typeof(loadColor) != "undefined") {
                            _loadColor = loadColor;
                        }
                        $icon.children().css({"background":_loadColor});
                        $loader.append($icon);
                        $parent.append($loader);
                    }
                    break;
                }
                case "hideLoading": {
                    $parent.find("#events_loader").remove();
                    break
                }
            }
        }
    })
})(jQuery);

CSS

.spinner {
    width: 60px;
    height: 60px;
    text-align: center;
    font-size: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.spinner > div {
    height: 100%;
    width: 6px;
    display: inline-block;

    margin-left: 6px;
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4)
    }
    20% {
        -webkit-transform: scaleY(1.0)
    }
}

@keyframes stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}

实现效果

引伸：$.extend({}),(function(){})(jQuery)的使用;

$.extend()深拷贝，浅拷贝的作用；

因为其本身存在一些重载原型

举个栗子：

var dog1={height:"60cm",age:3,color:{head:"yellow",body:"white"}};
var dog2={sex:"female",color:{body:"red"}};

var dog=$.extend(dog1,dog2);//默认false
var dog1=$.extend(true,dog1,dog2);
var dog2=$.extend(false,dog1,dog2);
//输出结果：
dog={height:"60cm",age:3,sex:"female",color:{body:"red"}};
dog1={height:"60cm",age:3,sex:"female",color:{head:"yellow",body:"red"}};
dog2={height:"60cm",age:3,sex:"female",color:{body:"red"}};

(function(){})(jQuery)有关匿名立即执行函数的理解；

(function(arg){...})(param),这个定义了一个带有arg参数的匿名函数，然后再通过param方法调用执行；

其实也就是相当于Var fuc =  function(){};fn(param)。Jquery也是一样的操作。

$.extend()还可以针对jquery进行二次自定义封装方法

当你想要开发一个公用插件的时候就可以通过这种方式结合实现。

比如我想要将原生的js属性封装到自己的jquery里面去

举个栗子：将原生的document.getElementsByTagName封装给jquery去使用

JS模块

(function($){
    $.extend({
        "getTagname" : function(colval){
            var tagname = document.getElementsByTagName(colval);
            return tagname;
        }
    });
})(jQuery);
var tagval = $.getTagname("h1")[0];
console.log("tagval="+tagval.innerText);

html模块

<h1>黄大大</h1>

上诉的LoadEvents也是同样的方法来封装实现的，主要介绍原理，实现可以自己尝试或留言询问。