jQuery.ajax在dateRangeSlider叫了两声，从userValues​​Changed [英] jQuery.ajax called twice from userValuesChanged in dateRangeSlider

问题描述

我使用jQDateRangeSlider触发jQuery.ajax call.There有两种方法，使滑块可以移动。

I am using jQDateRangeSlider to trigger a jQuery.ajax call.There are two ways in which the slider can be moved.

1. 将单独移动滑块的两端
2. 通过从一个地方移动整个突出块等

在情况1，我的code正常工作，但在个案2中，userValues​​Changed被调用两个或四个times.Is这一些bug与小部件还是我做错了什么吗？这是我的code相？

In case of 1, my code works fine, but in case 2, the 'userValuesChanged' gets invoked two or four times.Is this some bug with the widget or am I doing something wrong here? This is how my code looks?

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（）是从函数调用的决定。

init() is being called from function decide.

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

  init();
}
 else
 {

  init1();
 }
}

此功能决定（）被调用在下拉TP

This function decide() is being called on the onchange of a dropdown 'tp'

推荐答案

我在猜了一下这里你不说你用的是什么库的版本。不过我测试的插件中的jsfiddle并能正常工作，所以我认为你正在做重复调用的init 有约束力的额外处理该事件。你说：

I'm having to guess a bit here as you don't say what versions of the libraries you're using. However I tested the plugin in jsFiddle and it works fine, so I assume that you're doing repeated calls to init which are binding extra handlers to the event. You say:

此功能决定（）被称为一个下拉的OnChange 目标价

This function decide() is being called on the onchange of a dropdown tp

这意味着只要是下拉的变化的init 再次打来电话，处理程序被添加的再次以该事件。你可以看到这个发生在我这里的jsfiddle ，罪名是正常的，直到你点击该按钮来调用的init（）了。有几个方式这一轮，看到小提琴的意见为好。

This means that whenever that dropdown changes init is called again and the handler is added again to that event. You can see this happening here in my jsFiddle, counts are normal until you click the button to call init() again. There are a few ways round this, see the comments in the fiddle as well.

选项1 - 简单，但没有真正优雅。

Option 1 -- Simple but not really elegant.

刚刚摧毁的滑块INIT开始（）函数：

Just destroy the slider at the start of the init() routine:

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

这不会抛出一个错误，如果滑块尚未初始化（看起来像插件有一些健全检查），但它可能会导致在某些浏览器的可视化故障。

This doesn't throw an error if the slider hasn't been initialized (looks like the plugin has some sanity checking) but it may cause a visual glitch on some browsers.

选项2 - 好一点

使用全局变量保持注意，如果你已经创建的事件

Use a global variable to keep a note of if you've created the event

var is_init = false;
function init() { 

    // ... other code ... 

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

有使用全局变量的想法，其中包括伪造静态函数变量一些其他方法，但是这是一个简单的方法，它可以工作，因为你有两个初始化程序。

There are a few other ways to use the 'global variable' idea, including faking static function variables but this is the simple way and it may work since you have two init routines.

选项3 - 也许我的选择

Option 3 -- Probably my choice

您的init（）功能真的是（重新）初始化，因为它可以被称为一次以上。你只需要到处理程序绑定一次，以便你可以做到这一点的之外的初始化函数（或不同的功能，这只是调用一次内部）。你可以只后，页面加载在调用init之前做到这一点。这个工程只是注册一个事件处理程序，它并不关心，在这一点上的元素不能产生的情况下，它会处理一下就好了以后。这里有一个捣鼓了解这一点。

Your init() function is really a (re)init since it can be called more than once. You only want to bind the handler once so you can just do it outside the init function (or inside a different function that's only called once). You can do this before calling init, just after page load. This works it just registers an event handler, it doesn't care that at that point that element can't generate the event, it'll handle it just fine later. Here's a fiddle for that.

听起来真是你想要一个的init 函数的地方，就是所谓的一次（不依赖于一个元素）和 reinit的函数依赖于只是改变了值，但不会重新绑定事件的下拉列表。我没有看到你的事件处理程序的变化取决于不同的设置任何东西，但如果你可能必须去与选项1

It really sounds like you want an init function somewhere that's called once (not tied to an element) and a reinit function tied to the dropdown that just changes the values but doesn't rebind the event. I don't see anything in your event handler that changes depending on the different settings but if there is you'll probably have to go with Option 1.

有一些其他的选择（取消绑定事件处理程序，检测是否有已经绑定的处理程序），但他们可能会遇到更多的麻烦，如果其他处理程序也必将为这一事件。

There are some other options (unbind the event handler, detect if there's already a handler bound) but they may run into more trouble if other handlers are also bound to that event.

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

And this may not be the root cause of your problem, but I hope the fiddles help you in any case.

这篇关于jQuery.ajax在dateRangeSlider叫了两声，从userValues​​Changed的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！