JQuery运行函数等待X时间然后重新运行

时间:2016-06-06 11:25:46

标签: javascript jquery

我是jQuery的新手,我真的希望我可以帮助解决这个问题,因为它让我非常头疼。

这是我的代码:

$(function() {
    var global = '0'
    run(); // run function run on page load.

    function run(){
        var cars = new Array("Saab", "Volvo", "BMW");
        var wait = new Array("2000", "5000", "10000");

        alert (cars[global]);

        WAIT (wait[global]) THEN run function cars AGAIN {
            run();
            global++;
            if (global == 4) {
                global = '0';   
            }
        }
    }
});

因此,您可以看到:在页面加载函数run()运行时,警告“Saab”。然后该功能应等待2000ms并重新运行。在下一次运行时,运行会提醒“Volvo”并等待5000ms再重新运行。在第三次运行时,它将警告“BWM”并等待10000ms,然后将全局变量重置为0并重新执行。

基本上我要做的就是用不同的变量填充两个数组,并根据用户定义的延迟创建警报。

提前非常感谢你!

4 个答案:

答案 0 :(得分:1)

你的意思是 SetTimeout 用于在x毫秒(here more)之后运行代码。

这是一个有效的解决方案:

$(function() {
    var global = '0'
    run(); // run function run on page load.

    function run(){
        var cars = new Array("Saab", "Volvo", "BMW");
        var wait = new Array("2000", "5000", "10000");      
        alert (cars[global]);

        setTimeout(function(){
            global++;
            if (global == 3){
                global = '0';   
            }
            run();
        }, wait[global]); 
    }
})

以下是JSFiddle

我感动:

global++;
if (global == 3){
    global = '0';   
}

在函数调用之前,好像调用在递增之前,它将首先再次使用 global = 0 调用该函数。如果您不确定我的意思,请尝试使用JSFiddle。

只需清理一下代码(为了好玩),这是我的代码(相同的代码块只是重新排列):

$(function() {
    var cars = new Array("Saab", "Volvo", "BMW");
    var wait = new Array("2000", "5000", "10000");

    var global = '0'
    run(); // Initial run.

    function run(){
        if (global == 3){
                global = '0';   
            }
        alert (cars[global]);
        global++;

        setTimeout(function(){
            run();
        }, wait[global]); 
    }
})

答案 1 :(得分:0)

您可以在使用window.setTimeout再次运行该功能之前设置超时。

这是针对您的问题的递归解决方案:

$(function() {
    var cars = ["Saab", "Volvo", "BMW"];
    var wait = ["2000", "5000", "10000"];
    var index = 0;
    run();

    function run() {
        if(cars.length < index + 1 || wait.length < index + 1) {
            index = 0;
        }
        var car = cars[index];
        var waitingTime = wait[index];

        // do something with `car`
        console.log(car);

        index++;
        window.setTimeout(run, waitingTime);
    }
});

答案 2 :(得分:0)

<script>
var index = 0;
var cars = [];

$( document ).ready(function() {
  var obj = {car: "Volvo", timeout: "2000"};
  cars.push(obj);
  var obj = {car: "Saab", timeout: "5000"};
  cars.push(obj);
  var obj = {car: "BMW", timeout: "10000"};
  cars.push(obj);

  alertAndReRun();
});

function alertAndReRun(){
    console.log(index + " " + (cars.length-1));

        alert(cars[index].car);
        index++;
    if(index <= (cars.length-1)){ 
        setTimeout(alertAndReRun, cars[index].timeout);
    }
}

</script>

答案 3 :(得分:-1)

此示例使用 setInterval()

按预期工作
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.sample.ActivityMain">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:titleTextColor="#ffffff">

        </android.support.v7.widget.Toolbar>

        <FrameLayout
            android:id="@+id/wrapper_ntb_horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways">

            <View
                android:id="@+id/bg_ntb_horizontal"
                android:layout_width="match_parent"
                android:layout_height="52dp"
                android:layout_gravity="top"
                android:background="#4527A0"/>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="6dp"
                android:orientation="horizontal">

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginRight="3dp"
                    android:layout_weight="1"
                    android:orientation="horizontal">

                    <com.joanzapata.iconify.widget.IconTextView
                        android:id="@+id/search_icon"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="15dp"
                        android:layout_marginRight="10dp"
                        android:gravity="center|right"
                        android:shadowColor="#22000000"
                        android:shadowDx="3"
                        android:shadowDy="3"
                        android:shadowRadius="1"
                        android:text="{fa-search}"
                        android:textColor="#ffffff"
                        android:textSize="25sp"/>

                    <com.gigamole.library.NavigationTabBar
                        android:id="@+id/ntb_horizontal"
                        android:layout_width="160dp"
                        android:layout_height="40dp"
                        android:layout_gravity="center_vertical|left"
                        android:background="@drawable/bg_round_circle"
                        app:ntb_active_color="#4527A0"
                        app:ntb_animation_duration="150"
                        app:ntb_corners_radius="50dp"
                        app:ntb_inactive_color="#dddfec"
                        app:ntb_preview_colors="@array/red_wine"/>

                </LinearLayout>


            </LinearLayout>

        </FrameLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_horizontal_ntb"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="20dp"
        android:src="@drawable/ic_megaphone"
        app:layout_behavior="com.sample.Configurations.ScrollAwareFABBehavior"/>

</android.support.design.widget.CoordinatorLayout>

这里有一个JSFiddle:Time Variable interval