/*延迟期间最多执行一次：优化输入请求过多ajax*/

方式1：延迟等待debounce函数
function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        if (timeoutId) {
            clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(() => {
            func.apply(this, args);
            timeoutId = null;
        }, delay);
    };
}
定义一个延迟函数

const throttledProgressAttributeCode = debounce((e) => {
    let search = $(e.target).val()
    $.ajax({
        url: '/backend/attribute/search?field=code&limit=1&search=' + search ,
        success: function (res) {
            if (res['msg']) {
                Swal.fire(
                    {
                        title: '警告！',
                        text: res['msg'],
                        icon: 'error',
                        dangerMode: true,
                        confirmButtonText: '@lang{好的}'
                    }
                )
                return false;
            }
            let items = res['items']
            let attribute_code_input = $('#progress-attribute-code')
            if (items.length) {
                attribute_code_input.removeClass('border-success')
                attribute_code_input.addClass('border-danger')
            } else {
                attribute_code_input.removeClass('border-danger')
                attribute_code_input.addClass('border-success')
            }
        }
    })
}, 500);
$('#progress-attribute-code').on('input', throttledProgressAttributeCode)

属于延迟等待用户输入多少秒后才开始执行，前面的都清除执行。类似解决数据窗口抖动问题。

方式2：节流控制
function throttle(func, delay) {
let timeoutId;
let lastExecTime = 0;
return function (...args) {
const elapsedTime = new Date().getTime() - lastExecTime;
if (elapsedTime > delay) {
lastExecTime = new Date().getTime();
func.apply(this, args);
} else {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
lastExecTime = new Date().getTime();
func.apply(this, args);
timeoutId = null;
}, delay - elapsedTime);
}
};
}

定义一个节流函数

const throttledProgressAttributeCode = debounce((e) => {
    let search = $(e.target).val()
    $.ajax({
        url: '/backend/attribute/search?field=code&limit=1&search=' + search ,
        success: function (res) {
            if (res['msg']) {
                Swal.fire(
                    {
                        title: '警告！',
                        text: res['msg'],
                        icon: 'error',
                        dangerMode: true,
                        confirmButtonText: '@lang{好的}'
                    }
                )
                return false;
            }
            let items = res['items']
            let attribute_code_input = $('#progress-attribute-code')
            if (items.length) {
                attribute_code_input.removeClass('border-success')
                attribute_code_input.addClass('border-danger')
            } else {
                attribute_code_input.removeClass('border-danger')
                attribute_code_input.addClass('border-success')
            }
        }
    })
}, 500);
$('#progress-attribute-code').on('input', throttledProgressAttributeCode)

属于限制一定时间内只能执行一次或者几次的，或者设置一定时间内只执行一定次数的限流型控制