javascript - 包裹在闭包中时clearTimeout？

Question

已更新

HTML

<div class="notification-container" data-bind="foreach: notificationArray">
     <notification params="data: $data"></notification>
</div>

JS - 使用 KnockoutJS 创建可观察的“通知”消息数组。

appViewModel.notificationArray = ko.observableArray([
    { message : 'Test 1' },
    { message : 'test 2' }
]);

使用Knockout创建通知组件

ko.components.register('notification', {
    viewModel: function(params) {
        var data = params.data;

        /* set the message to the data.message */
        this.message = data.message || null;

        /* removes the notification from the array */
        this.removeNotification = function() {
            appViewModel.notificationArray.remove(data);
        };

        /* create timer to remove notification after 5s */
        /* need to wrap in closure so that inside of the setTimeout it can know about the data object needed to send to the remove() command */
        this.timer = function(obj, timeoutLength) {
            /* adding return statement per suggestion on Stack Overflow */
            return setTimeout(function() {
                appViewModel.notificationArray.remove(obj);
            }, timeoutLength);
        };

        this.timer(data, 5000);

       /* log will output function structure */
       /* clearTimeout will not work */
        this.hover = function() {
            console.log(this.timer);
            clearTimeout(this.timer);
        }

    },
    template: '<div class="notification show-notification" data-bind="event: { mouseover: hover, fastClick: hover }">'
        +'<div class="notifications-close clickable right" data-bind="fastClick: removeNotification"><span class="icon icon-x"></span></div>'
        +'<div class="notification-text" data-bind="text: message"></div>'
        +'</div>'
});

更新以反射(reflect)工作解决方案

JS

appViewModel.notificationArray = ko.observableArray([
    { message : 'Test 1' },
    { message : 'test 2' }
]);


ko.components.register('notification', {
    viewModel: function(params) {

        var data = params.data;

        this.message = data.message || null;
        this.timer = null;

        this.removeNotification = function() {
            appViewModel.notificationArray.remove(data);
        };

        this.timer =  ( function(self) {
            return setTimeout(function() {
                self.removeNotification();
            }, 5000);
        })(this);

        this.hover = function () {
            clearTimeout(this.timer);
        };

        this.restart = function() {
            this.timer = ( function(self) {
                return setTimeout(function() {
                    self.removeNotification();
                }, 5000);
            })(this);
        }

    },
    template: '<div class="notification show-notification" data-bind="event: { mouseover: hover, fastClick: hover, mouseout: restart }">'
        +'<div class="notifications-close clickable right" data-bind="fastClick: removeNotification"><span class="icon icon-x"></span></div>'
        +'<div class="notification-text" data-bind="text: message"></div>'
        +'</div>'
});

Answer 1

您没有设置 this.timer结果为setTimeout 。也许您需要return setTimeout ？

现在解决你的第二个问题。 this.hover通过 this 调用作为其他东西。这已在许多其他问题中得到解决。一种方法是使用var self = this在正确的范围内获得正确的this或者我当前的偏好是 this.hover = function() {...}.bind(this); .