【分享】JS事件觸發延遲－互聯網

文章出處

　　感謝糖粒子指證延遲執行，改成觸發延遲。還有他的思路。

效果說明：為了避免用戶鼠標無意識劃過，而觸發事件。浪費客戶端資源。

思路：當用戶劃過設置變量i=0;

每過100毫秒 i++

當i==10的時候就剛好是1秒。就觸發事件。

　　否則用清楚setInterval i不在++；

哈哈。不知道我描述清楚沒。

代碼：

var delay=function(t,fn){
            var i=0,
                j=10,
                t=(t*1000)/j,
                //把延遲時間平均分成10等份
                _this=this,
                //解決this綁定問題，所以調用delay函數的時候,請處理好this指向本身對象
                d=setInterval(function(){
                                           i++;
                                        if(i==j){
                                            clearInterval(d);
                                            fn.apply(_this);
                                            };
                                       },t);
                _this.onmouseout=function(){
                        clearInterval(d);
                    };
        }

測試：

這是一個測試DIV
把鼠標放在上面2秒后會彈出他的ID

今天早上的時候我坐在公車上突然想到這個問題的時候。發現我昨天寫的可能效率不高。于是有下面的想法，可能要比上面的好。

    var delay=function(t,fn){//接收兩個參數 t延遲時間秒為單位，fn要執行的函數
            var _this=this,//請注意還要個免費的this參數可以讓這個delay更完美
                d=setInterval(function(){
                                       fn.apply(_this);
                                       },t*1000);
                _this.onmouseout=function(){
                        clearInterval(d);
                    };
        }
//-----上面是整個延遲時間函數
//主要改進，不在循環調用一個函數來累加i，來判斷時間。爾直接使用
//setInterval 時間延遲，否則clearInterval 就可以帶到效果
//不知道是否會有BUG ，還請高手指點

    document.getElementById("aaaaa").onmouseover=function(){
        delay.apply(this,
                    [0.5,function(){alert(this.id)}]
                    );
        };
//昨天有朋友給我短消息說
// 這個什么意思(_this=this,解決this綁定問題，所以調用delay函數的時候,請處理好this指向本身對象)
//哪我就在啰嗦兩句；
//首先請看3個地方
//fn.apply(_this); 回調函數
//delay.apply(this,調用delay的地方
//                   [0.5,function(){alert(this.id)}]
//                  );
//alert(this.id)} 最后彈出對象的ID
//為什么最后可以使用this.id來獲取對象的ID呢。這說明 當前的this對象指向了觸發時間的對象（也就是aaaaaDIV）
//我在調用delay函數的時候使用 apply 讓delay調用的this指向aaaaaDIV
//然后把this又賦值給_this，主要是方便后面使用。
//最后在調用正則的事件函數的時候使用 fn.apply(_this); 把fn的this又指向了_this
//那么其實就有 this=_this=this=aaaaaDIV
//表達能力不好可能沒說清除。后面我寫個例子給你吧。

這里測試第2個新的方法，快速劃過不會觸發，停留500毫秒觸發

----------------------------分割線下面是幫別人解決疑惑的--------------------------------------------------

<div style=" width:500px; height:200px; border:1px solid #999;" id="ccc" >這里是給你測試的代碼
<br/>劃過的時候this指向window，所以this.id無效<br/>
劃離this指向ccc這個對象本身 所以this.id  彈出ccc<br/>
如果你還不了解apply建議去看看關于apply的一些文章<br/>
</div>
<script type="text/javascript">
    var dd=function(){
            alert(this.id);
        }
    document.getElementById("ccc").onmouseover=function(){
            dd();
        }
    document.getElementById("ccc").onmouseout=function(){
            dd.apply(this);
        }
</script>