javascript - 让我的函数不断检查它的状况

Question

我有一个 jquery 函数，当进度条在屏幕上时，它会将进度条从 0 动画到 100。问题是，如果它在页面加载时不可见(在页面上不可见)，则永远不会被触发。

我的代码

<script>

    $(function() {
        $('.dial').knob({
            min: '0',
            max: '100',
            readOnly: true,
            displayInput: true
        });

        $(".dial:in-viewport").parent().show(0, function() {
            $({ value: 0 }).animate(
                { value: 100 },
                {   duration: 1000,
                    easing: 'swing',
                    progress: function() {
                        $('.dial').val(Math.round(this.value)).trigger('change');
                    }
                });
        });
    });
</script>

我的问题是如何制作它，以便该函数不断检查它是否在屏幕上，直到它返回有效。

Answer 1

最简单的方法是创建一个间隔，每 n 毫秒执行一次代码。

var interval = 400;
var timer = window.setInterval(function(){
    // your code goes here ...
    if (yourCodeHasBeenExecuted === true) {
       window.clearInterval(timer);
    }
}, interval);

我想这会起作用，但它不是现有的最漂亮的解决方案。更好的方法是根据您的需要使用窗口调整大小或窗口滚动事件，并在那里执行代码。

您可以找到调整大小事件的示例 here .