UJS：指示“更改”事件仅在输入字段更改时触发一次

Question

我正在使用Rails随附的称为Rails UJS的库： https : //github.com/rails/jquery-ujs

它具有一个名为“ change.rails”的自定义事件，当输入字段发生更改并且您远离该字段时会触发该事件。 我正在使用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();
    })
}