Question

我一直试图修复我为时间选择器找到的插件，它是以下一个：

https://github.com/grimmlink/TimingField

除了一条关键线外，它几乎按预期工作：

this.tpl.find('.timingfield_hours .timingfield_next')
    .on('mouseup', function() {
        clearInterval(timeoutId);
        return false;
    })
    .on('mousedown', function(e) {
        timeoutId = setInterval($.proxy(this.upHour, this), 100);
        return false;
    });

我理解的代码的这一部分用于在用户按下按钮后每隔100毫秒触发upHour方法（相同的代码可以复制几分钟或几秒）。但是，它根本没有被触发，但是如果你移除了间隔的部分并且只是这样调用：

this.tpl.find('.timingfield_hours .timingfield_next')
    .on('mousedown', $.proxy(this.upHour, this));

它按预期工作，但您必须每次点击一下才能使其正常工作。

我确定会触发setInterval，因为我将其修改为：

this.tpl.find('.timingfield_hours .timingfield_next')
    .on('mouseup', function() {
        clearInterval(timeoutId);
        return false;
    })
    .on('mousedown', function(e) {
        timeoutId = setInterval(function(){
            console.log('x');
            $.proxy(this.upHour, this)
        }, 100);
        return false;
    });

我知道timeoutId正在移动，但该字段根本没有变化。这是代码的小提琴：

https://fiddle.jshell.net/xeapwbxc

问题的位置在JS的第32行。有人知道我应该改变什么才能使其有效吗？或者为什么不从内部函数调用函数？谢谢你的帮助。

Answer 1

您需要在this.upHour函数本身中绑定init。内部mousedown处理程序this将是一个按钮而不是插件实例。 Working example

var upHour = $.proxy(this.upHour, this); // `this` is plugin instace 
this.tpl.find('.timingfield_hours .timingfield_next')
            .on('mouseup touchstart', function() { clearInterval(timeoutId); return false; })
            .on('mousedown touchend', function(e) {
               console.log(this); // `this` is button element
               timeoutId = setInterval(upHour, 100); return false;
             });

截至您的方法

timeoutId = setInterval(function(){
        console.log('x');

        // this only creates new function and never call it
        // also `this` will be global or undefined (in strict mode) 
        $.proxy(this.upHour, this)
    }, 100);

原型事件未在另一个函数内触发（$ .proxy）

1 个答案: