鍍金池/ 問答/HTML/ 一個函數(shù)在更換圖片后多次運行

一個函數(shù)在更換圖片后多次運行

clipboard.png

clipboard.png

第一次都沒有問題。

在我重新把圖片更換以后,SheZhiTuPian(res.url)

clipboard.png

在更換圖片就變成了3次。 一直疊加。。。 這個什么原因造成的? 請大神支支招

回答
編輯回答
汐顏

切換圖片路徑的時候會再次運行onload事件,也就是執(zhí)行TuPianTuoFang函數(shù),這個函數(shù)里面你進行個事件的綁定,而且沒有提前解綁,所以事件會被重復(fù)綁定。

你可以在事件綁定前面加上解除綁定的操作

$(..).unbind().on(...)

但是這樣還是不嚴謹,因為TuPianTuoFang只是初始化拖放事件的函數(shù),不需要也不應(yīng)該重新運行他,你可以在onload事件外加一個變量來阻止重復(fù)執(zhí)行

var isonload = true;
xxx.onload = function(){
    if(isonload){
        TuPianTuoFang();
        isonload = false;
    }
}

如果TuPianTuoFang函數(shù)不再需要,也可以注銷TuPianTuoFang函數(shù)

xxx.onload = function(){
    if(TuPianTuoFang){
        TuPianTuoFang();
        TuPianTuoFang = null;
    }
}
2017年2月2日 19:30
編輯回答
帥到炸

應(yīng)該是事件被重復(fù)綁定了

(這命名無力吐槽...)

2018年8月12日 03:15
編輯回答
拽很帥

應(yīng)該是每次事件被重復(fù)綁定了,可以.unbind()。(另外說點題外的,設(shè)置圖片函數(shù)就別用拼音了,可以寫成setImg,是不是好些呢,哈哈哈)

2018年7月22日 16:09
編輯回答
風畔

樓上是對的,因為每次加載完都會重新綁定事件,所以重復(fù)綁定了。需要注意的是,圖片和 HTML 中的 <img> 存在對應(yīng)關(guān)系,但并非一個東西,所以拖放只需要綁定一次到 <img>,至于其中顯示什么圖片,通過 src 指定即可。

2018年4月29日 23:01