2. 程式人生 > >setInterval多組定時器函數封裝傳參

setInterval多組定時器函數封裝傳參

阿新 • • 發佈：2017-12-22
set blog tco 定時 tar 運行 top 並且 需要

昨天的例子是針對只有單個函數運行的結果，但是實際中可能會有多組函數這樣同時進行，那麽這個時候就要對函數進行封裝傳參，來實現效果了。就還拿昨天的例子來說吧，昨天寫的例子實現的效果是點擊按鈕，讓div向前移動，那麽今天就擴展一下，點擊按鈕讓div向後移動，想要實現這個效果，就必須要傳參了，來看代碼：

css代碼
<style>
#box{width:50px;height:50px;background:#ff6b0e;position: absolute;top:50px;left:50px;}
</style>

html代碼
</head>
<body>
<
 
input id="btn1" type="button" value="向前"/>
<input id="btn2" type="button" value="向後"/>
<div id="box"></div>
</body>

那麽js實現是這樣的：

<script>
    //兼容不同瀏覽器獲取行間樣式
    function getStyle ( obj, attr ) {
        return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
    }

    window.onload
 
=function(){
        var aBtn1=document.getElementById("btn1");
        var aBtn2=document.getElementById("btn2");
        var oBox=document.getElementById("box");

        aBtn1.onclick=function(){
            fn(oBox,18,500)
        };
        aBtn2.onclick=function(){
            fn(oBox,-18,10)
        };
        
 
//以上參數的區別是dir一個大於0，一個小於0，所以下面可以針對符號做判斷
        //大於和小於這些符號是不能當參數被傳的
        function fn(obj,dir,target){
            clearInterval(obj.timer);//這裏先要清除一下定時器是為了防止一直點擊按鈕，div一直加速

            //開啟定時器,假定讓其等於500的時候，停止下來
            obj.timer=setInterval(function(){
                var speed=parseInt(getStyle(obj,"left")) + dir;

                if( speed > target && dir>0){//這裏要做判斷大於目標數並且dir為大於0的數
                    speed = target
                }
                if( speed < target && dir<0){//這裏要做判斷小於目標數並且dir為小於0的數
                    speed = target
                }
                obj.style.left= speed +"px";

                if( speed == target){
                    clearInterval(timer)
                }

            },50)

            }


    };
</script>

其實這個例子是很簡單的，但是需要註意的細節是符號是不能向參數一樣被傳的，所以就要做判斷，因為有大量相同的代碼。那麽就把共通的可以專門提出來卸載函數裏，然後將可變化的值設定為參數來傳遞即可。這是比較通俗的說法，當然可能用語上會不太準確，但是能明白就行，也歡迎大神指出！

好了，今天就這樣了！

setInterval多組定時器函數封裝傳參

相關推薦

setInterval多組定時器函數封裝傳參

set blog tco 定時 tar 運行 top 並且 需要 昨天的例子是針對只有單個函數運行的結果，但是實際中可能會有多組函數這樣同時進行，那麽這個時候就要對函數進行封裝傳參，來實現效果了。就還拿昨天的例子來說吧，昨天寫的例子實現的效果是點擊按鈕，讓div向前移動，那

python多進程使用函數封裝

獲取 multi for 字段 child 函數 需要 per true import multiprocessing as mp from multiprocessing import Process class MyProcess(Process): "

python變量作用域,函數與傳參

printf last 輸出 引用 error module str color 變量引用 一、元組傳值: 一般情況下函數傳遞參數是1對1，這裏x,y是2個參數，按道理要傳2個參數，如果直接傳遞元祖，其實是傳遞一個參數 >>> def show(

C#為什麽不能像C/C++一樣的支持函數只讀傳參

out fun 寫代碼 安全 -s 用途 感覺 為什麽 c++ C#為什麽不能像C/C++一樣的支持函數只讀傳參？ 這個問題其實問的人挺多的，我自己也經常想實現這個功能，但是發現總是那麽的不盡人意。 有些人倒是給出了一下答案，但是都不能很好的解決像C/C++一樣的支持函數只

Java函數的傳參機制

輸出結果 如果 傳遞 出錯 結束 arraylist 多人 判斷 方法 一 最近的一個項目，裏面各種返回void，參數用引用類型，那叫一個熟和多，但是也把我繞糊塗了。 我就打算好好理一理java的傳參機制，整理一番 二 很多人一聽Java的傳參，那一定會脫口而出，jav

初識python 函數(定義,傳參,返回值)

one shu exp name 就是 關系 pre 可變 efi python基礎(二): 菜鳥教程基礎知識講解的非常全面,內容選擇我認為的重點輸出一遍 函數: 定義一個函數: 你可以定義一個由自己想要功能的函數，以下是簡單的規則： 　　 def fun(arg):

函數基礎-傳參

定義 += ret 動態參數 title code 關鍵字 bar 分享圖片 1.按位置傳值多余的參數都由*args統一接收，得到一個元組的形式 def mysum(*args): the_sum = 0 for i in args:

JavaScript變速動畫函數封裝添加任意多個屬性

ceil 測試 能力 def getc next nds rst eid <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

JavaScript變速動畫函數封裝添加任意多個屬性加回調函數

就是 child code push console computed 文檔 註冊事件 顯示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

JavaScript變速動畫函數封裝添加任意多個屬性加回調函數還有透明度

nis 最後一個元素 parse code name nds 第一個元素 listen child <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

變速動畫函數封裝增加任意多個屬性、透明度和層級

是否 false win 定時器 flag set -c 屬性 .get //計算後的樣式屬性---- 一個元素的任意的一個樣式屬性值function getStyle(element,attr) { //判斷這個瀏覽器是否支持這個方法 return windo

真是奇怪，js可以，jq卻開啟了多個定時器，誰能解答一下

eve body stop 時鐘 time 就會 set () 方式 timer = setInterval(mar,30); //鼠標移上去清除時鐘 box.onmouseover = function(event){

將函數的實際參數轉換成數組的方法，習慣用Array.prototype.slice.call(arguments)

原型對象 func eof for spa 什麽 pre str div 實際參數在函數中我們可以使用 arguments 對象獲得 （註：形參可通過 arguments.callee 獲得），雖然 arguments 對象與數組形似，但仍不是真正意義上的數組。 我們可以

react 父組件向子組件傳遞函數

eat hist extends imp pre 通過 cto [] from 這段時間一直在使用react，由於這react是單向數據綁定，總感覺有點不適用，畢竟之前一直都在使用angular，但學習還是要繼續，做了一個叠代的項目，都差點忘記要總結一下這個react了，現

字符類數組的常用函數

順序 庫函數 運用 大小寫 參數 cmp com 使用 下使用 對於字符串首先第一反應所需的頭文件就是 #include <cstring> 或者寫成（ #include <string.h>） 在這個頭文件下呢，有幾個常用的函數： 　1. strl

通過js獲取class類名的函數封裝

clas ret -1 .class class urn getclass ++ 不同 通過className獲取元素，不同的瀏覽器會有不同的支持情況，所以為了兼容各個瀏覽器在這裏，我寫了幾個函數獲取className的值 function byclass(classn){

頁面實現多個定時器（計時器）時選用NSTimer還是GCD？（幹貨不濕）

self. spa inf ima efault baidu 設定 common ref 定時器在我們每個人做的iOS項目裏面必不可少，如登錄頁面倒計時、支付期限倒計時等等，一般來說使用NSTimer創建定時器： + (NSTimer *)timerWithTimeInte

閉包函數、無參裝飾器

開放 2.0 range 名稱 for 分享 ray 原則 port 閉包函數：函數內部定義函數，成為內部函數。該內部函數包含對外部作用域，而不是對全局作用域名字的引用，那麽該內部函數成為閉包函數。 name=‘alex‘ 　#定義全局變量name=‘alex‘

Python開發【筆記】：單線程下執行多個定時器

自動 代碼 python 線程 timer ont -s 大量 過多 單線程多定時器 　　前言：公司業務需求，實例當中大量需要啟動定時器的操作；大家都知道python中的定時器用的是threading.Timer，每當啟動一個定時器時，程序內部起了一個線程，定時器觸發執行結

裝飾器函數

col span def lag mil outer 裝飾 rgs ret 裝飾器的本質：一個閉包函數 裝飾器的功能：在不修改原函數及其調用方式的情況下對原函數功能進行擴展 裝飾器滿足開放封閉原則： 　　1，對擴展是開放的 　　2，對修改是封閉的 裝飾器的主要功能：