Javascript 如何在不延迟的情况下设置主干模型值？

我试图用jquery ui和主干构建一个放大缩小滑块和按钮，但遇到了一个有趣的问题。我已经将设置缩放值作为模型的工作，因此您所要做的就是在视图中调用该方法，它处理值更新，但问题是，当我这样做时，它将落后于一个。。。我的意思是，开始值是8，你按下放大按钮，你会认为缩放值会变为9，但它会停留在8，然后下次你点击按钮时，它会变为9，下次你点击它时，它会变为10。。。等等，但这种滞后会导致一个奇怪的问题。因为我已经为滑块设置了一个最大值和一个最小值，所以我正在检查以确保缩放值保持在这些范围内。但是因为有延迟如果你想。。。它会低于最大值，不允许您增加它，但如果您通过单击“缩小”按钮来减少值，第一次单击时，它会将值更改为最大值，然后第二次单击时，它会降至15（低于最大值），因此我很困惑为什么会发生这种情况。在此方面的任何帮助都将不胜感激。。。我在下面包含了与此问题相关的代码。如果你不明白我说的话或者有问题。。。我会尽力回答

意见如下:

var SliderView = Backbone.View.extend({
    id: "slider-vertical",
    events: {
        "slidechange": "updateVal"
    },
    initialize:function(){
        this.model.on('change:zoom', this.update, this)
    },
    render: function() {
        this.$el.slider({
            orientation: "vertical",
            range: "min",
            min: 1,
            max: 16,
            value: 8,
        })
        return this; 
    },
    updateVal:function(ev){
        var val = this.$el.slider("option", "value");
        this.model.setZoom(val)
    },
    update:function(){
        this.$el.slider('value', this.model.get('zoom'))
    }
});

var ZoomInButtonView = Backbone.View.extend({
    id: "zoom-in-button",
    events: {
        "click": "update"
    },
    render: function() {
        this.$el.button();
        return this;
    },
    update: function(ev) {
        this.model.incrementZoom();
    }
});

var ZoomOutButtonView = Backbone.View.extend({
    id: "zoom-out-button",
    events: {
        "click": "update"
    },
    render: function() {
        this.$el.button();
        return this;
    },
    update: function() {
        this.model.decrementZoom(); 
    }
});

    // this is the view that handles all the events and sets everything up... and it gets called by main.js
var ZoomControllerView = Backbone.View.extend({
    el: ".wrap",

    // this renders all the sub views. 

    initialize:function(){
        this.model = new zoomModel
        this.slider = new SliderView({model: this.model}); 
        this.zoomInButton = new ZoomInButtonView({model: this.model});
        this.zoomOutButton = new ZoomOutButtonView({model: this.model});
        this.render();
    },
    render: function() {
        this.$el.append(this.slider.render().el);
        this.$el.append(this.zoomInButton.render().el);
        this.$el.append(this.zoomOutButton.render().el);
    }
});

这就是模型：

var ZoomModel = Backbone.Model.extend({
    // we set a default start zoom of 8 
    // so it's right in the middle.
    initialize: function() {
        this.zoom = 8;
    },
    setZoom: function(val) {
        if (val > 0 && val <= 16) {
            this.set({zoom: val}); 
        }
    },
    incrementZoom: function() {
        if (this.zoom < 16) {
            this.set({zoom: this.zoom++});
        }
    },
    decrementZoom: function() {
        if (this.zoom > 1) {
            this.set({zoom: this.zoom--}); 
        } 
    }
});

var ZoomModel=Backbone.Model.extend({
//我们将默认的开始缩放设置为8
正好在中间。
初始化：函数（）{
这个.zoom=8；
},
设置缩放：功能（val）{
如果（val>0&&val 1）{
this.set（{zoom:this.zoom--}）；
} 
}
});

在“递增缩放”和“递减缩放”方法中，值“this.zoom”在更改之前返回到“this.set”方法。这是你的问题。只要这样做：

incrementZoom: function() {
    if (this.zoom < 16) {
        this.set({zoom: ++this.zoom});
    }
},
decrementZoom: function() {
    if (this.zoom > 1) {
        this.set({zoom: --this.zoom}); 
    } 
}

incrementZoom:function（）{
如果（this.zoom<16）{
this.set（{zoom:++this.zoom}）；
}
},
递减空间：函数（）{
如果（this.zoom>1）{
this.set（{zoom:--this.zoom}）；
} 
}

谢谢您，先生。。你让我高兴极了。它就像一个符咒。@AlexW.H.B.：记住，

++x

递增

x

，然后返回

x

的（递增）值，而

x++

返回

x

的值，然后递增。

++

和

x

从左到右的顺序表示事件发生的顺序。