1. 程式人生 > >使用setInterval和setTimeout實現js定時重新整理功能

使用setInterval和setTimeout實現js定時重新整理功能

需求:進入頁面後,先等待5秒,之後重新整理按鈕開始旋轉,轉5秒後,停止旋轉,執行一次重新整理操作。

之後等待5秒,之後開始旋轉,轉5秒後,停止旋轉,執行一次重新整理操作。

如此反覆。

動圖如下:


思路:

關鍵需求是 轉5秒 等待5秒 再轉5秒,由於這裡是通過css樣式來實現旋轉和停止。這樣一個interval是無法完成旋轉和停止兩個動作的,所以需要在interval中加了一個timeout,這樣實現了等待5秒的功能。而且此時至始至終只有一個interval,而且只啟動一次

程式碼如下:

呼叫setTimer(5000);

function setTimer(seconds) {
    autoRefreshInterval = setInterval(function () {
        refresh_rotate_start();

        listTimeout02 = setTimeout(function () {
            refresh_rotate_end();
            searchBusList();
            //重新整理完成之後就clear掉,執行旋轉5秒
            //之後執行外部的等待5秒,在執行旋轉5秒
            clearTimeout(listTimeout02);
            listTimeout02 = undefined;
        }, 5000);

    }, seconds);
}

執行過程是:

先等待5秒,設定interval,並開始旋轉

再5秒後停止旋轉,執行一次search

之後把listTimeout02清空。此時interval中的func執行完成

其中關鍵程式碼是要清空內部的timeout。

如果不把listTimeout02清空,那麼就會不再旋轉但是仍會每5秒重新整理一次,為什麼呢?

應該是執行listTimeout02的等待旋轉結束的5秒操作時,外面的Interval仍會計時。那麼在旋轉結束,重新整理之後,外部interval也到時了,於是refresh_rotate_start() refresh_rotate_end(); busLineSearch();開始連續執行了。

而如果清空了listTimeout02,這樣在interval到時之後就會新建一個listTimeout02,執行5秒延時。又會於下一次refresh_rotate_start()開始旋轉的時候,到時。這樣就實現了以上需求。

一個js的執行順序要記住

就是如果你使用了setTimeout和setInterval,那麼其下面的語句是不會delaytime之後才執行的。setInterval和setTimeout巢狀也是遵循這個原則的。巢狀在setInterval中的setTimeout的delay time並不會影響setInterval的執行

相關推薦

使用setIntervalsetTimeout實現js定時重新整理功能

需求:進入頁面後,先等待5秒,之後重新整理按鈕開始旋轉,轉5秒後,停止旋轉,執行一次重新整理操作。之後等待5秒,之後開始旋轉,轉5秒後,停止旋轉,執行一次重新整理操作。如此反覆。動圖如下:思路:關鍵需求是 轉5秒 等待5秒 再轉5秒,由於這裡是通過css樣式來實現旋轉和停止。

JS 定時setInterval() setTimeout() 以及自己踩過的坑

js 定時器有以下兩個方法: setInterval() :按照指定的週期(以毫秒計)來呼叫函式或計算表示式。方法會不停地呼叫函式,直到 clearInterval() 被呼叫或視窗被關閉。 setTimeout() :在指定的毫秒數後呼叫函式或計算表示式。 setInt

js定時重新整理實現

碰到需求需要執行一個定時方法,並且隔一段時間去對比一次後臺數據,這裡使用js定時重新整理,ajax輪詢的方式實現 程式碼如下: <script type="text/javascript"> $(document).ready(function(){ re

JavaScript函數setInterval()setTimeout()正確的寫法

ava 改進 .cn tint 程序 寫法 set archive 編寫 一、常規寫法 1.1 不傳參數 function a (x, y) { var i = 0; var b = function(){ console.log(

PHP中的會話控制—sessioncookie(實現數據傳值功能)

代碼 會有 數據 xmlns code 特點 會話控制 pre color 1.session 登錄上一個頁面以後,長時間沒有操作,刷新頁面以後需要重新登錄。 特點:(1)session是存儲在服務器;    (2)session每個人(登陸者)存一份;    (3)

setInterval setTimeout 用法

setInterval 和 setTisetInterval 定時器,開始執行後,每間隔指定時間執行一次,除非清除定時器用法: setInterval(function(){ 方法... },1000);// 間隔時間 setTimeout 是在指定的時間後,執行該事件用法: setTimeout(fun

基於freemark,ssmOracle實現的分頁功能

freemark頁面`<#list mesgList as mesg> m e

setIntervalsetTimeout的區別以及setInterval越來越快問題的解決方法

setInterval()和setTimeout()方法都是js原生的定時方法,當然它們兩個的作用也是不同的,並且最近在做上下滾動公告欄的時候,發現了setInterval()非常令人抓狂的問題,那就是用setInterval()做的定時滾動會隨著瀏覽器頁面切換變得無法控制!為什麼會說無法控制呢,因為在切換頁

關於setIntervalsetTImeout中的this指向問題

1. 問題描述 前些天在練習寫一個小例子的時候用到了定時器,發現在setInterval和setTimeout中傳入函式時,函式中的this會指向window物件,如下例: var num = 0; function Obj (){ this.num =

SwipeRefreshLayout實現下拉重新整理功能

在Android5.0的v4包中,Google提供了SwipeRefreshLayout控制元件,用來執行下拉重新整理的效果。 XML: <?xml version="1.0" encoding="utf-8"?> <android.suppo

Android下拉重新整理完全解析 教你如何一分鐘實現下拉重新整理功能

                最近專案中需要用到ListView下拉重新整理的功能,一開始想圖省事,在網上直接找一個現成的,可是嘗試了網上多個版本的下拉重新整理之後發現效果都不怎麼理想。有些是因為功能不完整或有Bug,有些是因為使用起來太複雜,十全十美的還真沒找到。因此我也是放棄了在網上找現成程式碼的想法,

基於zookeeperquartz實現分散式定時排程

目的 利用zookeeper的特性,來控制quartz實現分散式排程,保證quartz的單點執行,同時解除quartz自身分散式部署對資料庫的依賴,保證同一時刻只有一個quartz應用在執行任務。 實現方式 利用zk的分散式獨佔鎖,控制quartz應用執行節點,讓拿

JavaScript中的setInterval()setTimeout()

1.setlnterval() setInterval() 方法可按照指定的週期(以毫秒計)來呼叫函式或計算表示式。 setInterval() 方法會不停地呼叫函式,直到 clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返回的 ID 值可用作

Xamarin. Android實現下拉重新整理功能

public class MvxPullToRefreshListView:PullToRefreshListView,PullToRefreshBase.IOnRefreshListener { public MvxPullToRefreshListView(Cont

使用ViewPagerRecyclerView實現水平分頁功能

/** * ght (c) 2007-2017 xxx Inc. All rights reserved. * * @author lzz * Created 2017/5/4 10:07 * @license http://www.x

使用SwipeRefreshLayoutRecyclerView實現下拉重新整理上拉載入更多

效果圖: 檔案目錄 佈局檔案 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/

Spring 學習——基於Spring WebSocket STOMP實現簡單的聊天功能

本篇主要講解如何使用Spring websocket 和STOMP搭建一個簡單的聊天功能專案,裡面使用到的技術,如websocket和STOMP等會簡單介紹,不會太深,如果對相關介紹不是很瞭解的,請自行查閱相關知識。 本篇的專案主要是一個學習Spring we

【開發筆記】Java.Net實現JS中的escape()unescape()

在做建行支付對接時,傳的引數中的漢字,需要用escape()編碼 但我是通過Java和.Net後臺直接請求,因此需要在後臺實現類似的功能 所以在此貼上程式碼 Java /** * 漢字編碼,實現js escape() * * @p

setIntervalsetTimeout ----javascript

先來了解 setInterval : 1,HTML DOM setInterval() 方法定義和用法 setInterval() 方法可按照指定的週期(以毫秒計)來呼叫函式或計算表示式。 setInterval() 方法會不停地呼叫函式,直到 clearInterval(

關於setInterval()setTimeout()一些小總結

網頁編寫中常常會遇到使用定時器或者說是計時器的時候,中秋的阿里月餅事件鬧得沸沸揚揚。網上有據說是本人貼出來的程式碼,程式碼中也是應用了setInterval()計時器,通過獲取控制元件,設定計時器,來