ASP. NET MVC; Javascript: Как запустить таймер при изменении значения? - PullRequest
Новая
       96

ASP. NET MVC; Javascript: Как запустить таймер при изменении значения?

0 голосов
/ 25 февраля 2020

Я очень плохо знаком с ASP. NET MVC и веб-разработкой и не знаю, как я могу позволить своему таймеру запускаться с помощью numberBox_valueChanged, а не просто вызывать мой метод button_OnClick? Вот фрагмент кода с бритвенной страницы моего Asp. net MVC приложения, которое я сделал с некоторыми элементами Devextreme: 

 @using DevExtreme.AspNet.Mvc;
    <html>
    <body>
    <div class="form">
                @(Html.DevExtreme().Button()
                    .ID("progress-button")
                    .Text("Start")
                    .Width(120)
                    .OnClick("button_onClick")
                )
            </div>
    <div class="progress-info">
                Time left 00:00:<span id="timer">10</span>
            </div>

            <div id="progress-info">
                @(Html.DevExtreme().ProgressBar()
                    .ID("progressBarStatus")
                    .Min(0)
                    .Max(100)
                    .Width("100%")
                    .Height(50)
                    .StatusFormat(new JS("progressBar_statusFormat"))
                    .OnComplete("progressBar_onComplete")
                    .OnValueChanged("progressBar_valueChanged")
                )

                <div>
                <div>
                    @(Html.DevExtreme().Slider()
                        .ID("handler-slider")
                        .Name("MyValue")
                        .Min(-20)
                        .Max(20)
                        .Value(new JS("spin"))
                        .Width(1140)
                        .Visible(false)
                        .OnValueChanged(@<text>
                            function(e){
                            $("#lineargauge").dxLinearGauge("instance").value(e.value);
                            }
                        </text>)
                    )
                </div>
                <div class="dx-field-value">
                    @(Html.DevExtreme().NumberBox()
                        .ID("slider-value")
                        .Name("MyValue")
                        .Value(new JS("spin"))
                        .InputAttr(false)
                        .Min(-20)
                        .Max(20)
                        .Width(200)
                        .ShowSpinButtons(true)
                        .OnValueChanged("numberBox_valueChanged")
                    )
                </div>

Вот так выглядит мой скрипт 

     <script>
            var spin = @Model.Drehrichtung;

    function numberBox_valueChanged(data) {
                $("#handler-slider").dxSlider("instance").option("value", data.value);
                //Extrem wichtig, damit dieser Wert nach hinten in den Controller gegeben werden kann
                drehen = data.value;
            }
            function progressBar_valueChanged(data) {
                $("#progressBarStatus").dxProgressBar("instance").option("value", data.value);
            }
            function marker_valueChanged(data) {
                $("#lineargauge").dxSlider("instance").option("value", data.value);
                drehen = data.value;
            }
            var seconds = 10,
                inProgress = false;

            window.intervalId = window.intervalId || null;

            function timer(){
                seconds--;
                setCurrentStatus();
                if (seconds === 0) {
                    clearInterval(intervalId);
                    seconds = 10;
                    return;
                }
            }

            function setCurrentStatus() {
                $("#progressBarStatus").dxProgressBar("option", "value", (10 - seconds) * 10);
                $("#timer").text(("0" + seconds).slice(-2));
            }

            function progressBar_statusFormat(value) {
                return;
            };
    function button_onClick(e) {
                    clearInterval(intervalId);

                    $("#progressBarStatus").removeClass("complete");

                    if (inProgress) {
                        e.component.option("text", "Continue");
                        clearInterval(intervalId);
                    } else {
                        e.component.option("text", "Stop");
                        setCurrentStatus();
                        intervalId = setInterval(timer, 1000);
                }
                inProgress = !inProgress;
            };
    </script>
    </body>
    </html>
...