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 Fiddle

正如您所看到的，我已经用while的递归调用替换了resize()循环。

以下是解释：

浏览器只在所谓的＆＃34;运行循环之间重绘屏幕。＆＃34; A＆＃34;运行循环＆＃34;是一个同步代码块 - 意思是＆＃34;没有中断＆＃34;。您发布的while循环是一段同步（读取＆＃34;阻止＆＃34;）代码。换句话说，它没有任何＆＃34;休息＆＃34;本身允许浏览器重绘。

如果您希望浏览器绘制中间步骤，则必须将执行推迟到下一个＆＃34;运行循环＆＃34;。（你必须暂停执行）

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

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

2 个答案: