Question

我正在使用jQDateRangeSlider来触发jQuery.ajax调用。有两种方法可以移动滑块。

单独移动滑块的两端
将整个突出显示的块从一个地方移动到另一个地方

如果是1，我的代码工作正常，但在情况2中，＆＃39; userValuesChanged＆＃39;被调用两次或四次。这是小部件的一些错误或我在这里做错了什么？我的代码看起来如何？

function init() {
    var tp = $('tp').value;
    if (tp == 'Daily') {
        dataFile1 = "http://localhost:8080/composite2/Composite/datejson";

        d3.json(dataFile1, function (error, data) {
            if (data) dataset1 = data;
            var min = dataset1[0].a;
            var jugad = dataset1[0].c;
            jugad2 = new Date(jugad);
            var min2 = new Date(min);
            var max = dataset1[dataset1.length - 1].b;
            var max2 = new Date(max);

            function addZero(val) {
                if (val < 10) {
                    return "0" + val;
                }
                return val;
            }
            var s = $j("#slider").dateRangeSlider({

                bounds: {
                    "min": min2,
                    "max": max2
                },
                range: {
                    min: {
                        hours: 25
                    },
                    max: {
                        days: 7
                    },
                },
                formatter: function (val) {
                    var m = moment(val);
                    return m.format("DD/MM/YYYY HH:00:00 ");
                },
                defaultValues: {
                    min: min2,
                    max: max2
                }
            });
            x = jugad2;
            x.setMinutes(0);
            x.setSeconds(0);
            z = x.getFullYear() + '-' + (x.getMonth() + 1) + '-' + x.getDate() + ' ' + x.getHours() + ':' + '00' + ':' + '00';
            var y = (s.dateRangeSlider("values").max);
            y.setMinutes(0);
            y.setSeconds(0);
            b = y.getFullYear() + '-' + (y.getMonth() + 1) + '-' + y.getDate() + ' ' + y.getHours() + ':' + '00' + ':' + '00'
            jQuery.ajax({
                type: 'POST',
                data: 'metric=' + $('metric').value + '&tp=' + $('tp').value + '&date_hour=' + z + '&date_hour=' + b,
                url: '/composite2/Composite/ajaxGetMv',
                success: function (data, textStatus) {
                    loadData(data);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {}
            });

            $j('#slider').on("userValuesChanged", function (e, data) {
                var x = data.values.min;
                x.setMinutes(0);
                x.setSeconds(0);
                z = x.getFullYear() + '-' + (x.getMonth() + 1) + '-' + x.getDate() + ' ' + x.getHours() + ':' + '00' + ':' + '00';
                var last = data.values.max;
                last.setMinutes(0);
                last.setSeconds(0);
                b = last.getFullYear() + '-' + (last.getMonth() + 1) + '-' + last.getDate() + ' ' + last.getHours() + ':' + '00' + ':' + '00';
                jQuery.ajax({
                    type: 'POST',
                    data: 'metric=' + $('metric').value + '&tp=' + $('tp').value + '&date_hour=' + z + '&date_hour=' + b,
                    url: '/composite2/Composite/ajaxGetMv',
                    success: function (data, textStatus) {
                        loadData(data);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {}
                });
            })
        });
    } //end of Daily Slider
} //end of init()

更新

从函数决定调用init（）。

function decide()
{
var tp = $('tp').value;
if (tp == 'Daily')
{

  init();
}
 else
 {

  init1();
 }
}

这个函数决定（）是在下拉列表的onchange上调用的，＆＃39; tp＆＃39;

Answer 1

我不得不在这里猜一下，因为你没有说你正在使用的库的版本。但是我在jsFiddle中测试了插件并且它工作正常，所以我假设您正在重复调用init，这些调用绑定了事件的额外处理程序。你说：

在下拉列表decide()
的基础上调用此函数tp

这意味着，只要再次调用该下拉列表更改init，就会再次将添加到该事件中。您可以在我的jsFiddle中看到这种情况，在您点击按钮再次呼叫init()之前，计数是正常的。这有几种方法，也可以看到小提琴中的评论。

选项1 - 简单但不是很优雅。

只需破坏init（）例程开头的滑块：

function init() {      
    $j("#slider").dateRangeSlider("destroy");

如果滑块尚未初始化（看起来插件有一些完整性检查），这不会引发错误，但它可能会导致某些浏览器出现视觉故障。

选项2 - 好一点

使用全局变量记下您是否已创建事件

var is_init = false;
function init() { 

    // ... other code ... 

    if (!is_init) 
    {
        $j('#slider').on("userValuesChanged", function (e, data) {
            // ... handler code ... 
        });
        is_init = true;
    } 
}

还有一些其他方法可以使用'全局变量'的想法，包括伪造静态函数变量，但这是一种简单的方法，因为你有两个init例程，所以它可以工作。

选项3 - 可能是我的选择

您的init()函数实际上是（重新）初始化，因为它可以被多次调用。您只想绑定处理程序一次，这样您就可以在外部执行init函数（或者只调用一次的其他函数）。您可以在调用init之前执行此操作，只需在页面加载后执行。这只是注册一个事件处理程序，它并不关心那个元素不能生成事件，它会稍后处理它。这是一个fiddle。

听起来你真的想要一个init函数调用一次（不绑定元素）和reinit函数绑定到下拉列表，它只是更改值但不重新绑定事件。我在您的事件处理程序中看不到任何根据不同设置而改变的内容，但如果有，您可能不得不使用选项1。

还有一些其他选项（取消绑定事件处理程序，检测是否已绑定处理程序）但如果其他处理程序也绑定到该事件，它们可能会遇到更多麻烦。

这可能不是你问题的根本原因，但我希望这些小提琴在任何情况下都能帮到你。

jQuery.ajax在dateRangeSlider中从userValuesChanged调用了两次

1 个答案: