jQuery的; 如何在插件中强制元素重绘

Question

我想编写自己的jquery插件以将效果应用于元素。 结果是折叠一个html元素（我确定这些元素已经存在，但我想学习自己编写）。

该函数获取所选元素的宽度并减小其宽度； 例如

 var width = $(this).width(); // get width while(width > 0){ width -= 1; $(this).width(width); // set new width .... but element it not redrawn 

我的问题是，我看不到宽度逐渐减小，但是一旦宽度为0，即一旦执行了循环并且可能在函数返回时，元素就会被重绘。

如何获得要重绘的元素，以便可以看到宽度缩小？

Answer 1

您的问题是循环没有延迟。

循环在几微秒内执行，这就是为什么看不到元素被重绘的原因。

您可以使用setTimeout延迟循环的执行，并在每次迭代时都对其进行回调，直到元素宽度为0为止：

function reduceWidth(item) {
    item.width(item.width() - 1);
    if (item.width() > 0) {
        setTimeout(function() {
            reduceWidth(item);
        }, 1);
    }
}
reduceWidth($('#your_element'));

Answer 2

这是您的代码示例，浏览器将在每个循环之间重新渲染：

TIMEOUT_MS = 10;
var $element = $(this);

var width = $element.width();

function resize() {
    $element.width(--width);
    if(!width) return;
    setTimeout(resize, TIMEOUT_MS);
}

resize();

JS小提琴

如您所见，我已经用对resize()的递归调用代替了while循环。

这里是一个解释：

浏览器仅在所谓的“运行循环”之间重绘屏幕。 “运行循环”是同步代码的块-表示“不间断”。 您发布的while循环就是这样一段同步（读取“阻止”）代码。 换句话说，它本身没有允许浏览器重绘的任何“中断”。

如果要浏览器绘制中间步骤，则必须将执行推迟到下一个“运行循环”。 （您必须暂停执行）

有两种相关的方法可以执行此操作： setInterval和setTimeout 。 setTimeout将把方法的执行推迟到将来的运行循环中，而setInterval将重复执行。