插件式异步加载

最新推荐文章于 2021-03-18 16:30:57 发布

蜗牛慢慢向上爬

最新推荐文章于 2021-03-18 16:30:57 发布

阅读量415

点赞数

本文介绍了一种使用JavaScript防止按钮被重复点击的方法，并通过设置定时器实现后台页面的断续加载。该方案利用jQuery简化DOM操作，通过为按钮添加属性标记已加载状态，确保每次点击只发送一次请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、两种形式，点击按钮js请求控制器（拼凑好数据），加载视图

防止重复点击请求

$('#lanmu2').live("click", function(){
		var _this = $(this);
		if(_this.attr('past') != 1){
			$.get('/columns/FiveIncome',function(html){		    				
				$('#five_n2').html(html);	
				_this.attr('past',1);					
			});
		}
});

2、定时，setTimeout. 在触发一个事件后，断断续续在后台调用其它页面加载。

setTimeout(function(){
        $.get('/columns/FiveIncome',function(html){                            
                $('#five_n2').html(html);                                    
            });
    },100)
setTimeout(function(){
        $.get('/columns/TwentyIncome',function(html){        
                $('#twenty_n3').html(html);                             
            });
    },120)
setTimeout(function(){
        $.get('/columns/TotalIncome',function(html){        
                $('#zong_n4').html(html);                    
            });
    },130)

具体步骤：

一、首先，在页面放置最外层div

二、js写请求

三、控制器

 public function FiveIncome()
    {
        $data  = [];
        //5日detail
        $detail =  $this->stock->getColumnDetail(2);
        $data['tulist'] = $this->ColumnIncome($detail['list'],2);
        $data['detail'] = $detail;


        //高手榜table
        $list = $this->stock->getColumnRank(2);
        foreach($list as $key =>&$value){
            $value['nickname']= isset($value['nickname'])?mb_strcut($value['nickname'],0,12,'utf-8'):"";
        }

        $data['list'] = $list;
        $this->load->view('column/fiveincome',$data);
    }

四、加载的小页面 fiveincome

html

填充至 $('#lanmus').html(html); 并 $('#lanmus').show();