首页 > 解决方案 > 如何在自定义 js 对象上设置自己的处理程序事件?

问题描述

有一个Intervalwith next 用法:

let interval = new Interval(1000);
interval.ontick = function(progress){
    console.log('Progress:', progress);
};
interval.start(10);

超时一秒后内部start()调用onTickEventHandler(),但是ontickundefined.

function start(count) {
    _count = count;
    _intervalId = setInterval(onTickEventHandler, _timeout);
}

function onTickEventHandler() {
    if (_progress == _count) {
        reset();
        callEventHandler(onfinish);
        return;
    }

    callEventHandler(ontick, _progress++); // ontick is undefined
}

我试过这样

_intervalId = setInterval(onTickEventHandler.bind(this), _timeout);

this有我的interval.ontick,但里面onTickEventHandler-ontickundefined

更新

我到处都改用let ontick了。function ontickthis

可以简化吗?目标是与 DOM 元素一样:

button.onclick = function(){}
interval.ontick = function(){}

完整代码

const Interval = function (timeout) {
    const _timeout = timeout;

    let _intervalId;
    let _count;
    let _progress = 0;

    function ontick(){}
    function onpause(){}
    function onresume(){}
    function onfinish(){}

    function onTickEventHandler() {
        if (_progress == _count) {
            reset();
            callEventHandler(this.onfinish);
            return;
        }

        callEventHandler(this.ontick, _progress++);
    }

    function start(count) {
        _count = count;
        _intervalId = setInterval(onTickEventHandler.bind(this), _timeout);
    }

    function pause() {
        clearInterval(_intervalId);
        callEventHandler(this.onpause);
    }

    function resume() {
        this.start(_count);
        callEventHandler(this.onresume);
    }

    function reset() {
        clearInterval(_intervalId);
        _progress = 0;
    }

    function callEventHandler(handler, arg1){
        if (handler){
            handler(arg1);
        }
    }


    return {
        start: start,
        pause: pause,
        resume: resume,
        ontick: ontick,
        onpause: onpause,
        onresume: onresume,
        onfinish: onfinish,
    };
};

标签: javascripteventsevent-handlingundefinedsetinterval

解决方案


推荐阅读