«

js 按照队列顺序执行函数,保证当前执行的函数不会被后面的函数覆盖

时间:2024-2-22 14:19     作者:韩俊     分类: Javascript


js 按照队列顺序执行函数,保证当前执行的函数不会被后面的函数覆盖。

/**
 * 按照队列顺序执行函数
 * @param fn
 * @returns {function(...[*]=)}
 */
function queueFn(fn) {
    const queue = [];
    let running = false;
    function next() {
        if (running) return;
        if (!queue.length) return;
        running = true;
        var args = queue.pop(), config = {millisecond: 3000};
        config = Object.assign(config, args[0][1]);
        try {
            fn.call(this, args[0][0], config);
        } catch (err) {
            console.error(err)
        }
        setTimeout(function () {
            running = false;
            setTimeout(function () {
                next();
            }, 150);
        }, config.millisecond);
    }
    return function (...args) {
        queue.push([args, this]);
        next();
    }
}

/**
 * 弹窗显示提醒消息
 * @param str
 * @param config
 */
function oppoMsg(str, config) {
    if ($('#alertBox').length) {
        $('#alertBox').remove();
    }
    str = '<div id="alertBox">' + str + '</div>';
    $('body').append(str);
    $('#alertBox').css({
        'top': parseFloat((($(window).height()) / 2 + window.scrollY) * 9 / 10) + 'px',
        'left': Math.floor(($(window).width() - $('#alertBox').outerWidth(true)) / 2) + 'px',
        'zIndex': typeof config.zIndex == 'undefined' ? '' : config.zIndex
    }).fadeIn('fast').delay(parseInt(config.millisecond)).fadeOut('fast', function () {
        this.remove();
    });
}

const queuedOppoMsg = queueFn(oppoMsg);

测试调用:

for (let i = 0; i < 3; i ++) {
    queuedOppoMsg('第' + i + '个提醒', config);
}

标签: javascript

热门推荐