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的示例。

让我的功能继续检查它的状况

1 个答案: