JavaScript实践

JavaScript防抖函数

防抖函数（Debounce）在处理高频触发事件（如滚动、输入、鼠标移动等）时非常有用。在这些事件中，事件处理函数可能会在短时间内被频繁触发，这可能会导致性能问题，因为每次事件触发都可能涉及到复杂的处理，如DOM操作、资源加载等。

function debounce(func, wait) {
    let timeout;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            func.apply(context, args);
        }, wait);
    };
}

在这个函数中，func是你想要防抖的函数，wait是等待的时间（以毫秒为单位）。这个函数返回一个新的函数，当你调用这个新的函数时，它会等待wait毫秒，然后调用func。如果在等待期间再次调用这个新的函数，它会重新开始计时。

// 创建一个防抖的函数
const debouncedFunc = debounce(function() {
    console.log('Hello, world!');
}, 1000);

// 调用这个防抖的函数
debouncedFunc();
debouncedFunc();
debouncedFunc();

在这个示例中，虽然我们连续三次调用了debouncedFunc，但console.log('Hello, world!')只会被执行一次，因为每次调用debouncedFunc时，它都会重新开始计时。

获取服务器时间

function getOnlineTime() {
    // 获取联网时间

    // var onlineTime = new Date($.ajax({async: false}).getResponseHeader( 'Date' ));
    // $.ajax({ async: false })是一个同步的AJAX请求，它会阻塞浏览器直到请求完成。
    // 默认情况下，jQuery的$.ajax()方法会缓存GET请求的结果。
    // 这意味着，如果你在短时间内多次发出相同的GET请求，jQuery可能会直接返回第一次请求的结果，而不是每次都向服务器发送请求。
    // 要解决这个问题，你可以禁用AJAX请求的缓存，方法是在$.ajax()方法的参数中添加cache: false
    
    var onlineTime = new Date($.ajax({ async: false, cache: false }).getResponseHeader("Date"));
    onlineTime.setMinutes(onlineTime.getMinutes());

    // 格式化时间为 "yyyy-mm-dd hh:mm:ss" 格式
    function dateTimeFormate(date) {
        var year = date.getFullYear();
        var month = ('0' + (date.getMonth() + 1)).slice(-2);
        var day = ('0' + date.getDate()).slice(-2);
        var hour = ('0' + date.getHours()).slice(-2);
        var minutes = ('0' + date.getMinutes()).slice(-2);
        var seconds = ('0' + date.getSeconds()).slice(-2);
        return year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds;
    }
    console.log("获取到的联网时间："+ dateTimeFormate(onlineTime));

    // 返回推迟后的格式化时间
    return dateTimeFormate(onlineTime);
}