运行每个元素一个函数

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 () { ... } 部分（以及所有 "this" 实例），代码将起作用。在此先感谢您的帮助。

Answer 1

执行超时回调时，this上下文引用window，因为你实际上是在调用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

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

$('.foo').each(function () {
    var $this = $(this);

    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();
});

运行每个元素一个函数

Running a function for each element

javascript

each

jquery

运行 每个元素一个函数

Running a function for each element

javascript

each

jquery

运行每个元素一个函数