javascript - 将 'custom' 函数添加到 javascript 对象

Question

抱歉问题含糊，但不知道如何表达。

我正在创建一个计时器(带有进度条，从 100% 到 0)，并且我想添加诸如“onStop”函数之类的内容供用户使用。该函数将在计时器达到 0 后被调用。我如何将它添加到我的类中？

当前代码:

"use strict";

const progressBar = { 

    // Default config, set to countdown starting at 3 minutes
    config: { 
        //  Define time in seconds 
        time: 180, // 3 minutes
        // Wrapper
        wrapper: '',
        // New element that will be the actual progress bar inside the wrapper
        bar: ''
    },

    //onStop: function() { console.log('triggered'); }, // custom function
    onStart: function() {}, // custom function

    bind: function(el) {
        this.createBar(el);
    },

    createBar: function(el) {
        const wrapper = document.getElementById(el);
        const bar = document.createElement("div");
        this.config.bar = bar;
        this.config.bar.id = "progressbar-inside";
        this.config.bar.style.width = '100%';
        this.config.bar.style.height = '100%';
        wrapper.appendChild(bar);
    },

    start: function() {
        //const percentage = 0.55
        const percentage = 100 / this.config.time;
        const time = this.config.time;
        progressBar.countDown(percentage, '100', time-1);
    },

    countDown: function(percentage, width, time) {
        const new_time = time-1;
        const new_width = width - percentage;
        this.config.bar.style.width = new_width + '%'

        console.log(time);  

        if (time === 0) {
            progressBar.onStop();
            return;
        }

        setTimeout(function() {
            progressBar.countDown(percentage, new_width, new_time)
        }, 1000);
    }

}

有人可以像这样使用它:

progressBar.bind('progressbar');
progressBar.config.time = 25;
progressBar.start();

如果我想允许最终用户执行以下操作，我应该添加什么:

progressBar.onStop(function() {
 // Timer finished! Do stuff here
});

Answer 1

收集数组内的停止处理程序:

stopHandlers: [],

然后，当调用 onStop 时，只需将函数推送到该数组:

onStop(fn) { this.stopHandlers.push(fn); },

然后触发它们(在某个方法内部):

   this.stopHandlers.forEach(fn => fn());