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

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 中的&nbsp;<img>&nbsp;存在对应关系，但并非一个东西，所以拖放只需要绑定一次到&nbsp;<img>，至于其中显示什么图片，通过&nbsp;src&nbsp;指定即可。

Answer 4

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