在 mouseup、keyup 或 done 后从 wpColorPicker (Iris) 获取颜色答案

【问题标题】：Get color from wpColorPicker (Iris) after mouseup, keyup or done在 mouseup、keyup 或 done 后从 wpColorPicker (Iris) 获取颜色
【发布时间】：2016-11-19 09:50:54
【问题描述】：

我想在用户完成拖拽 ColorPicker（wpColorPicker 或 IrisColorPicker）后更改 SVG 形状的填充颜色，因为有十几个 SVG 形状，每个形状都有很多圆圈、路径等...

所以我试图在AutomatticIris 中找到类似 [done，或类似的东西] 的事件，但我失败了，只有 [change] 可用Iris docs 但因为我使用 AJAX 从服务器获取 SVG 形状，所以不可能做到这一点工作变动事件。

【问题讨论】：

如果此类更改事件不可用，此类问题的常见解决方案是在每次更改事件发生时清除并启动计时器（通过 setTimeout）。所以定时器只有在 change 事件在特定时间（你通过 setTimeout 设置的时间间隔）不会被触发时才会触发。
我试图避免这种方法所以在这里问也许有人知道解决方案
如何添加 SetTimeOut 到 Change function $('..color-picker').wpColorPicker({ change: function (event, ui) { } );

标签： javascript svg color-picker

【解决方案1】：

此类问题的常见解决方案是在每次更改事件发生时清除并启动一个计时器（通过 setTimeout）。所以定时器只有在 change 事件在一定时间内（你通过 setTimeout 设置的时间间隔）不会被触发时才会触发。

这是一个 sn-p，它在颜色选择器中最后一次更改后 1 秒（1000 毫秒）更改标题的颜色：

jQuery(document).ready(function($){
    console.log('ready');
    var color = null;
    var timer = null;
    var changed = function(){
        console.log("Changed");
        $("#headlinethatchanges").css( 'color', color);
    };
    $('#color-picker').iris({
        width: 400,
        hide: false,
        change: function(event, ui) {
            if (timer) clearTimeout(timer);
            timer = setTimeout(changed, 1000);
            color = ui.color.toString();
        }
    });
});

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script src="http://automattic.github.io/Iris/javascripts/iris.min.js"></script>
    <script src="http://automattic.github.io/Iris/javascripts/prism.js"></script>

<h1 id="headlinethatchanges">Iris Test</h1>
<input type="text" id="color-picker" value="#bada55" />

【讨论】：