Javascript Jquery微调器微调事件值延迟

信息

我想在微调器的值更改时更新按钮中的文本。在这里，我需要向微调器添加2个事件。

change

事件和

spin

事件。当用户按下按钮（例如添加+10值或-10值）时，会触发

change

事件。当用户单击

ui微调器按钮添加+1或-1值时，会触发
spin
事件。我有以下代码来更新按钮的文本：

代码

var spinner = $("#spinnerTool").spinner(
    {
        change: function (event, ui) {
            $("#payCoinsBtn").html('Pay €' + $(this).val());
        },
        spin: function (event, ui) {
            $("#payCoinsBtn").html('Pay €' + $(this).val());
        }
    }
);

$("#plusTen").click(function () {
    var spinnerValue = parseInt($("#spinnerTool").val());
    spinner.spinner("value", spinnerValue + 10);
});

$("#minusTen").click(function () {
    var spinnerValue = parseInt($("#spinnerTool").val());
    spinner.spinner("value", spinnerValue - 10);
});

//HTML
- 10
+ 10

问题

var spinner = $("#spinnerTool").spinner(
    {
        change: function (event, ui) {
            $("#payCoinsBtn").html('Pay €' + $(this).val());
        },
        spin: function (event, ui) {
            $("#payCoinsBtn").html('Pay €' + $(this).val());
        }
    }
);

$("#plusTen").click(function () {
    var spinnerValue = parseInt($("#spinnerTool").val());
    spinner.spinner("value", spinnerValue + 10);
});

$("#minusTen").click(function () {
    var spinnerValue = parseInt($("#spinnerTool").val());
    spinner.spinner("value", spinnerValue - 10);
});

当按下按钮并触发
change
事件时，按钮内有正确的文本和值（例如“支付10欧元”），但当按下
ui微调器按钮并触发
spin
事件时，按钮内的值始终落后1步。因此，当微调器内的值为3时，按钮内的文本显示“支付2欧元”

为什么这发生在
spin
事件中而不是
change
事件中？我如何解决这个问题？
显然，在当前值增加或减少1之前调用了
spin
事件。因此，我在函数中添加了更改按钮文本的代码，该函数在当前值增加或减少后调用。像这样：

$('.ui-spinner-up').click(function () {
    $("#payCoinsBtn").html('Pay €' + $("#spinnerTool").val());
});

$('.ui-spinner-down').click(function () {
    $("#payCoinsBtn").html('Pay €' + $("#spinnerTool").val());
});

显然，
spin
事件是在当前值增加或减少1之前调用的。因此，我在函数中添加了更改按钮文本的代码，该函数在当前值增加或减少后调用。像这样：

$('.ui-spinner-up').click(function () {
    $("#payCoinsBtn").html('Pay €' + $("#spinnerTool").val());
});

$('.ui-spinner-down').click(function () {
    $("#payCoinsBtn").html('Pay €' + $("#spinnerTool").val());
});

使用停止事件：

var spinner = $("#spinnerTool").spinner(
{
   stop: function (event, ui) {
      //alert("Current = " + $("#spinnerTool" ).spinner("value")) ;
      $("#payCoinsBtn").html('Pay €' + $(this).val());
   },
    ...             }
});

使用停止事件：

var spinner = $("#spinnerTool").spinner(
{
   stop: function (event, ui) {
      //alert("Current = " + $("#spinnerTool" ).spinner("value")) ;
      $("#payCoinsBtn").html('Pay €' + $(this).val());
   },
    ...             }
});