一个函数在更换图片后多次运行

Question

第一次都没有问题。在我重新把图片更换以后，SheZhiTuPian（res.url）在更换图片就变成了3次。 一直叠加。。。 这个什么原因造成的？ 请大神支支招

Answer 1

切换图片路径的时候会再次运行onload事件，也就是执行TuPianTuoFang函数，这个函数里面你进行个事件的绑定，而且没有提前解绑，所以事件会被重复绑定。

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

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

但是这样还是不严谨，因为TuPianTuoFang只是初始化拖放事件的函数，不需要也不应该重新运行他，你可以在onload事件外加一个变量来阻止重复执行

var isonload = true;

xxx.onload = function(){

    if(isonload){

        TuPianTuoFang();

        isonload = false;

    }

}

如果TuPianTuoFang函数不再需要，也可以注销TuPianTuoFang函数

xxx.onload = function(){

    if(TuPianTuoFang){

        TuPianTuoFang();

        TuPianTuoFang = null;

    }

}

Answer 2

应该是事件被重复绑定了

(这命名无力吐槽...)

Answer 3

楼上是对的，因为每次加载完都会重新绑定事件，所以重复绑定了。需要注意的是，图片和 HTML 中的 <img> 存在对应关系，但并非一个东西，所以拖放只需要绑定一次到 <img>，至于其中显示什么图片，通过 src 指定即可。

Answer 4

应该是每次事件被重复绑定了，可以.unbind()。（另外说点题外的，设置图片函数就别用拼音了，可以写成setImg，是不是好些呢，哈哈哈）