Question

我正在使用Peity js插件在我的页面上创建甜甜圈图表。我正在尝试为每个.foo元素设置图表的动画：

<span class="foo" data-value="10"></span>

$('.foo').each(function () {

    var updateChart = $(this).peity('donut');
    var text = "";
    var i = 0;

    function myLoop() {
        setTimeout(function () {

            text = i + "/12";

            updateChart.text(text)
                .change()

            i = i + 0.2;

            var maxValue = $(this).data("value");
            if (i <= maxValue) myLoop();

        }, 0.5)
    }
    myLoop();
});

然而，由于某些原因，它在控制台中没有错误而无法正常工作。如果我删除$('.foo').each(function () { ... }部分（以及所有＆＃34;此＆＃34;实例），代码将起作用。提前感谢您的帮助。

Answer 1

执行超时回调时，this上下文引用窗口，因为您实际上正在调用window.setTimeout方法。

试试这个：

$('.foo').each(function () {

    var updateChart = $(this).peity('donut');
    var text = "";
    var i = 0;

    function myLoop() {
        setTimeout($.proxy(function () {
            text = i + "/12";
            updateChart.text(text)
                .change()
            i = i + 0.2;
            var maxValue = $(this).data("value");
            if (i <= maxValue) myLoop();
        },this), 0.5)
    }
    myLoop();
});

Answer 2

问题是计时器处理程序中的上下文，这里最简单的解决方法是使用闭包变量

<action>
some action
another action
another action again

    some action 2
    another action 2

</action>

为每个元素运行一个函数

2 个答案: