javascript - UJS : instruct 'change' event to fire only once when input field changes

Question

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

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