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

【问题标题】：UJS: instruct 'change' event to fire only once when input field changesUJS：指示“更改”事件在输入字段更改时仅触发一次
【发布时间】：2017-05-25 15:38:22
【问题描述】：

我正在使用 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();
        })
    }

我该如何解决这个问题？

【问题讨论】：

标签： javascript jquery ruby-on-rails twitter-bootstrap

【解决方案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();
    })
}

【讨论】：