Question

我正在使用一个名为Rails UJS的Rails附带的库：https://github.com/rails/jquery-ujs

它有一个名为＆＃39; change.rails＆＃39;的自定义事件。当输入字段发生更改并且您远离字段时触发。我正在使用bootstrap-colorpicker库：https://itsjavi.com/bootstrap-colorpicker/

当您更改选择选择器的值时，它会更新输入字段，当您滚动颜色选择器时，会触发数百万个更改事件，并将数百万个ajax请求发送到服务器。

我不知道如何规避这个问题。我尝试添加一个计时器，仅在3秒后发送ajax请求，但在更改颜色时仍会发送数百万个ajax请求：

    color_picker: function(){
        $color_picker.on('change.rails', $form_holder, function(event, xhr, settings) {
            setTimeout(function(){
                $color_picker.trigger('change.rails');
            }, 3000)
            event.preventDefault();
        })
    }

如何解决这个问题？

Answer 1

您可以通过将超时设置为变量来存储对超时的引用：

var timeout = setTimeout(function(){}, 3000);

然后你可以通过调用：

取消该超时

clearTimeout(timeout)

如果您在'change.rails'事件发生时清除超时，则延迟的ajax方法不会触发，直到超时有机会完成：

color_picker: function(){

    var timeout;

    $color_picker.on('change.rails', $form_holder, function(event, xhr, settings) {

        clearTimeout(timeout);

        timeout = setTimeout(function(){
            $color_picker.trigger('change.rails');
        }, 3000)
        event.preventDefault();
    })
}

UJS：指导和改变＆＃39;输入字段更改时仅触发一次的事件

1 个答案: