layui时间控件闪退的问题介绍

问题介绍

layui是一种基于开源的UI框架，适用于web开发。它提供了很多UI元素（比如表单、表格、分页、下拉框等），还有一些简单易用的js模块，比如弹出层、日期选择等。Layui官网提供了大量的教程，帮助用户开发出各种样式美观、功能强大的应用。

时间控件在前后端开发中都是非常实用的工具，通过时间控件可以更好地展示或保存时间相关的信息。在layui的UI元素中，提供了一个时间控件，可以为开发者带来很多便利。但是，不同的使用环境和参数设置可能会导致时间控件出现闪退问题，影响页面的可用性和用户体验。下面我将详细介绍layui时间控件闪退的问题及其解决方案。

问题分析

layui时间控件闪退的问题得以解决前，需要我们先了解一些基础知识。layui时间控件的使用一般分为两种情况：

第一种情况是简单的时间选择，比如选择一个日期、月份、时间等，对应的UI控件是layui.laydate。这种控件可以在input或者div等元素中渲染出相应的选择组件，获取用户选择的时间或者日期。layui.laydate的初始化和使用非常方便，可以通过配置参数来满足不同的需求。

layui.use('laydate', function(){
  var laydate = layui.laydate;
  laydate.render({
    elem: '#test1'
  });
});

第二种情况则是选择时间区间，比如日期范围、时间范围或者自定义的时间区间等，对应的UI控件是layui.laydate.range。与第一种情况类似，layui.laydate.range也可以通过配置参数来实现不同的效果。值得注意的是，配置参数的设置能否正确地被解析也是关键因素之一，不同的配置参数组合实际上是通过智能解析来实现记忆的。如果值不能被正确地解析，也会导致闪退问题。

layui.use('laydate', function(){
  var laydate = layui.laydate;
  //执行一个laydate实例
  laydate.render({
    elem: '#test1' //指定元素
  });

  //执行一个laydate实例
  laydate.render({
    elem: '#test1',
    type: 'datetime',
    range: true
  });
});

了解了layui时间控件的基础后，我们来看看闪退问题是如何发生的。通常，在以下情况下会出现layui时间控件闪退的现象：

• 时间控件被频繁调用。
• 时间控件的使用与配置参数不匹配。
• 时间控件的初始化可能存在同步问题。
• 时间控件的耗时操作可能会导致线程阻塞。

上述问题的产生都与layui时间控件的应用环境或使用不当有关。接下来，我们将分别分析可能的原因，并提供相应的解决方案。

解决方案

问题一：时间控件被频繁调用。

layui时间控件在DOM创建之后需要一定时间才能响应，如果频繁地调用会让页面失去响应能力或者无法快速响应。为了解决这个问题，我们可以采用一些措施来减轻对时间控件的调用频率。

var timeFn = null;
layui.use(['laydate'], function () {
    var laydate = layui.laydate;
    var startDate = laydate.render({
        elem: '#startTime',
        trigger: 'click'
    });

    var endDate = laydate.render({
        elem: '#endTime',
        trigger: 'click',
        done: function (value, date) {
            if (!$.isEmptyObject(startDate.config)) {
                if (value === "") {
                    startDate.config.max = laydate.now(0);
                } else {
                    startDate.config.max = endDate.config.min; //结束日选了才会重置开始日的最大日期
                }
            }
        }
    });

    $("#startTime, #endTime").focus(function () {
        clearTimeout(timeFn);
    }).blur(function () {
        timeFn = setTimeout(function () {
            startDate.hide();
            endDate.hide();
        }, 200);
    });
});

问题二：时间控件的使用与配置参数不匹配。

layui时间控件的主要用途是用来处理时间的，如果在控件初始化的参数配置时没有对这个特性进行充分考虑，就很容易遇到闪退问题。解决这个问题的方法在于仔细阅读官方文档，根据自己的需求来配置控件。需要注意的是，有时候对于不同的时间格式和时区，配置的参数也可能有所区别，需要仔细斟酌。

layui.use('laydate', function(){
  var laydate = layui.laydate;
  //年选择器
  laydate.render({
    elem: '#test3'
    ,type: 'year'
  });

  //常规用法
  laydate.render({
    elem: '#test2'
  });

  //下拉选择月份注意点：max/min - year
  laydate.render({
    elem: '#test5'
    ,type: 'month'
    ,range: '~'
    ,format: 'yyyy-MM'
    ,max: 0
    ,min: -11
  });

  //日期时间选择器
  laydate.render({
    elem: '#test7'
    ,type: 'datetime'
  });

  //使用自定义格式的时间控件
  laydate.render({
        elem: '#timeFormat',
        format: 'yyyy-MM-dd HH:mm:ss',
        type:"datetime"
    });
});

问题三：时间控件的初始化可能存在同步问题。

layui时间控件在初始化的过程中，需要完成多个任务，其中可能包含对于DOM操作等同步任务，如果这个过程被其他的任务打断，就可能会出现延迟加载的问题。因此，我们需要保证时间控件初始化过程中是顺序化的，不得打乱其与其他程序的交互。下面展示了一个异步初始化的例子：

layui.use(['layer', 'form', 'laydate'], function () {

    var layer = layui.layer,
        laydate = layui.laydate;

    var loadLaydate = function () {
        //时间选择器初始化
        laydate.render({
            elem: '#checkIn',
            min: new Date().format('yyyy-MM-dd')
        });

        laydate.render({
            elem: '#checkOut',
            min: new Date().format('yyyy-MM-dd')
        });
    };

    //异步加载laydate
    layui.load({
        url: '/lib/layui-v2.2.6/lay/modules/laydate.js'
        , success: function () {
            loadLaydate();
        }
    });
});

问题四：时间控件的耗时操作可能会导致线程阻塞。

layui时间控件在加载时需要执行一些耗费时间的操作（比如初始化、渲染、解析参数等），如果在浏览器中同时执行多个这样的异步任务，就可能导致线程阻塞，从而出现闪退问题。为了解决这个问题，我们可以采用一些夹杂异步任务的方式来完成时间控件的加载。

function loadLaydateBegin() {
        if (typeof layui !== 'undefined') {
            layui.config({
                version: '1517539053623' //为了更新 js 缓存，可忽略
            });

            layui.use(['laydate', 'jquery'], function () {
                var $ = layui.jquery,
                    laydate = layui.laydate;

                var config = {
                    theme: '#009688',
                    done: function (value, date) {
                        if ($('#LAY_demorange_s').val() !== '' && $('#LAY_demorange_e').val() !== '' && $('#LAY_demorange_s').val() > $('#LAY_demorange_e').val()) {
                            layer.msg('起始日期不能大于结束日期');
                            $('#LAY_demorange_s').val('');
                            return false;
                        }
                    }
                };

                //年月日
                laydate.render({
                    elem: '#LAY_demorange_s1',
                    max: '2099-06-16 23:59:59',
                    istoday: false,
                    type: 'datetime',
                    format: 'yyyy-MM-dd HH:mm:ss',
                    done: function (value, date) {

                        var interval = parseInt($('#LAY_demorange_interval').val());

                        var evl = $('#LAY_demorange_e').val();

                        var date2millis = Date.parse(evl.replace(/-/g, '/'));
                        var date1millis = Date.parse(value.replace(/-/g, '/'));

                        if (!isNaN(date1millis) && !isNaN(date2millis)) {
                            if ((date2millis - date1millis) / (3600 * 1000) > interval) {
                                layer.msg('日期跨度不能大于' + interval + '小时');
                                $('#LAY_demorange_s').val('');
                                return false;
                            }
                        }
                    }
                });

                laydate.render({
                    elem: '#LAY_demorange_e1',
                    max: '2099-06-16 23:59:59',
                    istoday: false,
                    type: 'datetime',
                    format: 'yyyy-MM-dd HH:mm:ss',
                    done: function (value, date) {

                        var interval = parseInt($('#LAY_demorange_interval').val());

                        var evl = $('#LAY_demorange_s').val();

                        var date2millis = Date.parse(value.replace(/-/g, '/'));
                        var date1millis = Date.parse(evl.replace(/-/g, '/'));

                        if (!isNaN(date1millis) && !isNaN(date2millis)) {
                            if ((date2millis - date1millis) / (3600 * 1000) > interval) {
                                layer.msg('日期跨度不能大于' + interval + '小时');
                                $('#LAY_demorange_e').val('');
                                return false;
                            }
                        }
                    }
                });
            });
        } else {
            setTimeout(loadLaydateBegin, 100);
        }
    }

    loadLaydateBegin();